Используя только CSS, покажите div при наведении на <a>

Question

Я хотел бы показать div, когда кто-то наводит курсор на элемент <a>, но я хотел бы сделать это в CSS, а не в JavaScript. Вы знаете, как этого можно достичь?

Answer 1

Не забудь. если вы пытаетесь навести курсор на изображение, вы должны поместить его вокруг контейнера. CSS:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Если вы наведите курсор на это:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Это покажет:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>

Answer 2

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: наведите курсор на div, чтобы показать текст в другом div

Answer 3

Из моего тестирования с использованием этого CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

И этот HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, получилось, что он расширяется с использованием второго, но не расширяется с использованием первого. Так что если между целью наведения и скрытым div есть div, он не будет работать.