0

descr

.shoes1 .option-list {
  display: none;
  margin-top: -350px;
}

.shoes1:hover {
  display: block;
}
<div class="shoes">
  <div class="shoes1">
    <div class="price-box">$145,99</div>
    <div class="description">
      Even&Odd
      <div class="option-list">
        <button class="view"></button>
        <button class="wishes"></button>
      </div>
    </div>

  </div>

Уже все перепробывал, хочу сделать чтобы при наведении на блок shoes1 текст description исчезал и появлялся на его месте option-list с кнопками. возможно структуру html нужно переделать?

3
  • без js хотите?)
    – haswell
    25 окт 2017 в 11:30
  • можно и с js, я делеас с js, текст even&odd просто мигал при наведении, а кнопки не появлялись. устанавливал свойство display none при onmouseover и display: block при onmouseout
    – Joe Kappa
    25 окт 2017 в 11:33
  • .shoes1:hover .option-list{display: block} 25 окт 2017 в 11:52

2 ответа 2

2

* {
  margin: 0;
  padding: 0;
}

.shoes {
  width: 500px;
  height: 300px;
  background: silver;
}

.description,
.price-box {
  display: block;
}

.option-list {
  display: none;
}

.shoes:hover .option-list {
  display: block;
}

.shoes:hover .description,
.price-box {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="D:\test\style\main.css">
  <script src="D:\test\js\adaptiveMenu.js" defer></script>
</head>

<body>
  <div class="testwrap">
    <div class="test">
      <div class="shoes">
        <div class="shoes1">
          <div class="price-box">$145,99</div>
          <div class="description">Even&Odd</div>
          <div class="option-list">
            <button class="view">A</button>
            <button class="wishes">B</button>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

1
  • у меня текст мигает, но не исчезает, ладно будем фиксить) спасибо за ответ
    – Joe Kappa
    25 окт 2017 в 12:05
1

или вот такой css

* {
  margin: 0;
  padding: 0;
}

.shoes {
  width: 500px;
  height: 300px;
  background: silver;
}

.description,
.price-box {
  opacity: 1;
  transition: 1s;
}

.option-list {
  opacity: 0;
  transition: 1s;
}

.shoes:hover .option-list {
  opacity: 1;
  transition: 1s;
}

.shoes:hover .description,
.price-box {
  opacity: 0;
  transition: 1s;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.