我想知道当我仅使用CSS将鼠标悬停在图像B上时如何更新图像A,是否可能?如果不是,我将如何只使用纯JavaScript(没有库)。但是css才是我想要用的......
答案 0 :(得分:6)
正如我在评论中所指出的,这完全取决于你的加价。在没有看到任何加价的情况下,我只能发表一些一般性的建议;但重要的是要注意,您想要影响的元素(F
)必须稍后出现在DOM中(是元素F
的子元素,或者是后续兄弟元素,或后续兄弟元素的后代)而不是与你想要互动的元素E
。
也就是说,以下方法可以使用相关的标记:
将鼠标悬停在img
内的第一个#a
内,使用display
(一般同级)组合子切换后续img
元素的E ~ F
:< / p>
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second,
#a img.first:hover ~ img.second {
display: none;
}
#a img:hover ~ img.first {
display: none;
}
#a img:hover ~ img.second {
display: inline-block;
}
将鼠标悬停在#a
更改位置,可以使用.first
(直接同级)组合子切换.second
和#b
图像内的E + F
和<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
</div>
<div id="b">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a,#b {
float: left;
border: 1px solid #000;
padding: 0.2em;
}
img.second {
display: none;
}
#a:hover + #b img.first {
display: none;
}
#a:hover + #b img.second {
display: inline-block;
}
图像的显示:< / p>
E F
使用F
一般后代组合子(我实际上并不完全确定空格字符是组合子,但无论如何......它基于E
是一个<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second {
display: none;
}
#a:hover img.first {
display: none;
}
#a:hover img.second {
display: inline-block;
}
)的后代:
E > F
使用<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<div>
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
</div> div {
display: inline-block;
}
img {
display: none;
border: 1px solid #000;
padding: 0.2em;
}
#a > img {
display: inline-block;
}
#a:hover img {
display: inline-block;
}
直接子/直系后代组合子:
<div id="a"></div>
#a {
width: 200px;
height: 400px;
background-image: url(http://www.lorempixel.com/200/400/people);
background-repeat: none;
background-position: 50% 50%;
position: relative;
}
#a:hover::after {
content: url(http://www.lorempixel.com/200/400/animals);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
}
还有机会使用伪元素和css生成的内容(在兼容/最新的浏览器中):
{{1}}
答案 1 :(得分:3)
在您的特定情况下,这很容易,因为#bg
是#hv
的孩子
只需将悬停选择器从您拥有的内容更改为:
#bg:hover #hv {...}
在这里查看我的小提琴:http://jsfiddle.net/xJSQt/
答案 2 :(得分:2)
答案 3 :(得分:0)
简单。假设你有一个像这样的div:
<div class="myImage">
因此,在CSS中设置普通背景图像,然后使用:hover伪元素将其更改为所需的翻转图像。类似的东西:
.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/