Показывать и скрывать ссылки с hover

Я хотел бы знать, возможно ли делать эффект с hover, в котором скрылась ссылка, которая содержит кнопку контакта. Факт состоит в том, что я хочу, чтобы он был видимым внутри div только, когда расположится мышь на div отец.

Спасибо за помощь.

0
задан 09.01.2017, 10:25
0 ответов

Для этого намерения ты можешь использовать селектор > который он показывает, что он - прямой сын отца, чтобы передавать тебя к кнопке. Позже, когда ты делаешь hover в div ты можешь способствовать тому, чтобы она явилась кнопкой изменяя свойство display. По умолчанию, мы будем должны показывать, что свойство display кнопки будь невидимым (display: none).

Пример:

#contenedor{
  height: 300px;
  width: 300px;
  background-color: red;
}

#boton{
  display: none;
}

#contenedor:hover > #boton{
  display: block;
}
<div id="contenedor">
    <button id="boton">Estas sobre el div</button>
</div>
3
ответ дан 03.12.2019, 17:48

problemilla ответа @Error404, - что с display: none; он лишает тебя места, которое занимало элемент, и тебе может удаваться иметь нежелательные эффекты, как ты будешь видеть в предстоящем примере:

#contenedor{
  height: 150px;
  width: 150px;
  background-color: red;
}

#boton{
  display: none;
}

#contenedor:hover > #boton{
  display: block;
}
<div id="contenedor">
  <p>OTRO ELEMENTO</p>
    <button id="boton">Estas sobre el div</button>
  <p>OTRO ELEMENTO</p>
</div>

Предстоящий пример - со свойством visibility, с чем он занимает сайт, не будучи видимым:

div {
  height: 150px;
  width: 150px;
  background-color: yellow;
}

button { 
  visibility: hidden; 
}

div:hover button {
  visibility: visible;
}
<div>
  <p>OTRO ELEMENTO</p>
    <button>Estas sobre el div</button>
  <p>OTRO ELEMENTO</p>
</div>

Info: Не необходимо использовать селектор > так как они находятся внутри элемента div#contenedor.

3
ответ дан 03.12.2019, 17:48