Удаление класса при наведении

442

18 октября 2017, 06:31

Здравствуйте! Есть блок у которого изначально есть внутренняя тень(inset). Так же внутри этого блока есть кнопка, которая скрыта с помощью класса .dspNone. Необходимо чтобы при наведении на блок, тень внутри блока исчезла, а кнопка появилась(для этого я так понимаю необходимо удалить класс .dspNone у кнопки). На данный момент получилось сделать следующее,при наведении тень пропадает, но кнопка почему-то не появляется. Или это по другому делается?

.block:hover { 
  box-shadow: none; 
} 
 
.dspNone { 
  display: none; 
} 
 
.block { 
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8) inset; 
} 
 
.block { 
  background: red; 
} 
 
.block:hover > .btn1 { 
  display: block; 
} 
 
.block:hover > .text { 
  display: none; 
} 
 
.text 
{ 
  padding-top:10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block" style="width: 50px; height: 50px"> 
  <p class="text">TextText</p> 
  <button class="dspNone btn1">Кнопка</button> 
</div>

Answer 1

Можно сделать на css, так :

.block:hover > .btn1 {
  display: block;
}

Если же все-таки нужен jquery :

$(".block").hover(function() { 
  $('.btn1').removeClass("dspNone"); 
}); 
 
$(".block").mouseleave(function() { 
  $('.btn1').addClass("dspNone"); 
});

.block:hover { 
  box-shadow: none; 
} 
 
.dspNone { 
  display: none; 
} 
 
.block { 
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8) inset; 
} 
 
.block { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block" style="width: 50px; height: 50px"> 
  <button class="dspNone btn1">Кнопка</button> 
</div>

По комментарию и уточнениям в вопросе, я смог сделать так (нарыл на enSO):

.block:hover { 
  box-shadow: none; 
} 
 
.dspNone { 
  display: none; 
} 
 
.block { 
  width: 60px; 
  height: 50px; 
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: flex; 
  -ms-flex-align: center; 
  -webkit-align-items: center; 
  -webkit-box-align: center; 
  align-items: center; 
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8) inset; 
} 
 
.block { 
  background: red; 
} 
 
.block:hover>.btn1 { 
  display: block; 
} 
 
.block:hover>.text { 
  display: none; 
} 
 
.text { 
  color: red; 
}

<div class="block"> 
  <p class="text">TextText</p> 
  <button class="dspNone btn1">Кнопка</button> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Горизонтальная прокрутка

Друзья с помощью чего можно реализовать горизонтальную прокрутку как на этом сайте?

339

HTML

Контекстное меню HTML

Элемент не добавляется

367

HTML

Пропадают пробелы в html при использовании file_get_html

В html имеется <div class="cl"> и <div class="cl ">

299

HTML

Сделать ячейку таблицы ссылкой

Решил использовать fancyBox3 для вывода изображенийНо возникла проблема в том, что кнопки на моем сайте оформлены через <td> и onclick

341