I want to show second div
(in HTML) with class dikh
a 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;
}
#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;
}
#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方法来实现这一点