在悬停时显示特定的div?仅使用css和html

时间:2022-11-03 08:30:14

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

我希望在光标悬停在锚标记上时使用类dikha显示第二个div(在HTML中)。

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;
}

3 个解决方案

#1


3  

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是第三个孩子,而不是第二个孩子(因为是第一个)。

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

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

#2


6  

Write like this:

像这样写:

a:hover ~ .dikha {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

#3


-1  

you can use javascript function here.

你可以在这里使用javascript函数。

< onmouseover="document.getElementById('myid').style.display='block'">

< id="myid" class="dikha">

Your dikha class should be hidden by default

默认情况下,您的dikha类应该隐藏

.dikha { display:none; }

.dikha {display:none; }

you can also use jquery slidetoggle method to achieve this

你也可以使用jquery slidetoggle方法来实现这一点

#1


3  

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是第三个孩子,而不是第二个孩子(因为是第一个)。

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

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

#2


6  

Write like this:

像这样写:

a:hover ~ .dikha {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

#3


-1  

you can use javascript function here.

你可以在这里使用javascript函数。

< onmouseover="document.getElementById('myid').style.display='block'">

< id="myid" class="dikha">

Your dikha class should be hidden by default

默认情况下,您的dikha类应该隐藏

.dikha { display:none; }

.dikha {display:none; }

you can also use jquery slidetoggle method to achieve this

你也可以使用jquery slidetoggle方法来实现这一点