How to display and hide a div with CSS?(如何使用 CSS 显示和隐藏 div?)
问题描述
在我的脚本中有三个 div.当我将鼠标悬停在第一行时,我想用 class="ab"
显示 div,当悬停在第二行时,我想用 class="abc"
显示 div.否则我想默认显示带有 class="a"
的 div.
In my script there are three divs. I want to display div with class="ab"
when I hover on first line and display div with class="abc"
, when hover on second line. Otherwise I want to display div with class="a"
by default.
但它从不显示带有 class="a"
的 div.
But it never displays the div with class="a"
.
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
这是我的问题的 JSFiddle:JSFiddle 链接
Here is my JSFiddle of my problem: JSFiddle Link
推荐答案
你需要
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,
#f:hover ~ .a{
display: none;
}
在 http://jsfiddle.net/gaby/n5fzB 处更新了演示/2/
原始 CSS 中的问题是 css 选择器中的 ,
启动了一个全新的选择器.它没有合并.. 所以 #f:hover ~ .abc,.a
表示 #f:hover ~ .abc
和 .a
.您将其设置为 display:none
因此它始终设置为对所有 .a
元素隐藏.
The problem in your original CSS was that the ,
in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a
means #f:hover ~ .abc
and .a
. You set that to display:none
so it was always set to be hidden for all .a
elements.
这篇关于如何使用 CSS 显示和隐藏 div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何使用 CSS 显示和隐藏 div?
基础教程推荐
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 响应更改 div 大小保持纵横比 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在for循环中使用setTimeout 2022-01-01