如何在没有JavaScript的情况下将鼠标悬停在图像B上时更改图像A.

时间:2012-06-11 15:44:09

标签: css

我想知道当我仅使用CSS将鼠标悬停在图像B上时如何更新图像A,是否可能?如果不是,我将如何只使用纯JavaScript(没有库)。但是css才是我想要用的......

4 个答案:

答案 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;
}​

JS Fiddle demo

将鼠标悬停在#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

JS Fiddle demo

基于后代的选择:

使用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

JS Fiddle demo

使用<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%;
}​

JS Fiddle demo


有机会使用伪元素和css生成的内容(在兼容/最新的浏览器中):

{{1}}

JS Fiddle demo

答案 1 :(得分:3)

在您的特定情况下,这很容易,因为#bg#hv的孩子

只需将悬停选择器从您拥有的内容更改为:

#bg:hover #hv {...}

在这里查看我的小提琴:http://jsfiddle.net/xJSQt/

答案 2 :(得分:2)

要在悬停外部元素#hv时更新内部元素#bg的背景位置,您可以:

请参阅此Working Fiddle示例!

#bg:hover #hv {
   ...
}

答案 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*/