显示悬停的特定div？只使用CSS和HTML [英] display specific div on hover? using css and html only

问题描述

我想在游标悬停在锚标签上时，显示第二个 div （以HTML形式），并且类 dikh a。

HTML代码：

 < a>将鼠标悬停在我身上！ < / A> 
< div class =faraz> sdjfg< / div> 
< div class =dikha>在悬停时显示的资料< / div> 
  

STYLE

  div {
 display：none; 
} 
 
 a：hover> div：nth-​​child（2）{
 display：block; 
 background-color：RED; 
 height：250px; 
 width：960px; 
 
  

解决方案

您需要使用相邻兄弟姐妹选择〜。此外，您要显示的div是第三个孩子，而不是第二个孩子（因为< a> 是第一个孩子）。

  div {
 display：none; 
} 
 a：hover〜div：nth-​​child（3）{
 display：block; 
 background-color：RED; 
 height：250px; 
 width：960px; 
} 
  

演示： http://jsfiddle.net/3eFhf/

I want to show second div (in HTML) with class dikha on cursor hover over anchor tag.

HTML CODE:

<a>Hover over me!</a>
<div class="faraz"> sdjfg </div>
<div class="dikha">Stuff shown on hover</div>

STYLE

div {
display: none;
}

a:hover > div:nth-child(2) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}

解决方案

You need to use the adjacent siblings selector ~. Also, the div you want to show is the third child, not the second (because the <a> is the first).

div {
    display: none;
}
a:hover ~ div:nth-child(3) {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

Demo: http://jsfiddle.net/3eFhf/

这篇关于显示悬停的特定div？只使用CSS和HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！