将鼠标悬停在另一图像上时显示图像

-1

我有一张图像和一张包含图像的列表，当我将鼠标悬停在列表中的第一张图像上时，我该如何使用css？这里是我的代码：将鼠标悬停在另一图像上时显示图像

ul{ 
 
display: none 
 
} 
 

 
.hoveroverme:hover{ 
 
ul{ 
 
display:block 
 
} 
 
}

<img src="http://placehold.it/350x150" class="hoveroverme"> 
 

 
<ul class="list-inline list-unstyled"> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
</ul>

来源

2017-05-27 stephjhonny

可能重复的[如何影响其他元素当一个div徘徊]（https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered ） – Rob

你正在寻找一个兄弟选择。在这种情况下，您可以使用相邻的兄弟选择器（+）或通用的兄弟选择器（~）。

ul { 
 
    display: none 
 
} 
 

 
.hoveroverme:hover + ul { 
 
    display: block 
 
}

<img src="http://placehold.it/350x150" class="hoveroverme"> 
 

 
<ul class="list-inline list-unstyled"> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
</ul>

来源

2017-05-27 21:29:37

你应该在这里使用兄弟选择+或~

ul{ 
display: none 
} 

.hoveroverme:hover ~ ul{ 
display:block 
}

+只会选择立即由前选择后面的第一个元素。

~选择前一个选择器前面的所有兄弟。

来源

2017-05-27 21:30:48 vijayscode

将鼠标悬停在另一图像上时显示图像

回答

相关问题