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

Question

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

Answer 1

正如我在评论中指出的那样,这完全取决于你的加价.在没有看到任何加价的情况下,我只能发表一些一般性的建议; 但是,重要的是要注意,您想要影响的元素(F)必须稍后出现在DOM中(是元素的子元素F,或者是后续兄弟元素,或后续兄弟元素的后代)E,而不是要与之交互的元素.

也就是说,以下方法将起作用,并带有相关标记:

基于兄弟姐妹的选择:

使用(通用兄弟)组合器将鼠标悬停在第一个img内部,#a切换display后续img元素E ~ F:

<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小提琴演示.

将鼠标悬停在#a更改上可以使用(直接同级)组合器切换内部.first和.second图像的显示:#bE + 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;
}?

JS小提琴演示.

基于后代的选择:

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

JS小提琴演示.

使用E > Fimmediate-child/immediate-descendant组合器:

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

JS小提琴演示.

有还使用伪元素和CSS生成内容(在兼容/跟上时代的浏览器)的机会:

<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小提琴演示.