在没有JavaScript的情况下将图片悬停在图片B上时如何更改图片A [英] How do I change image A when hovering over image B without JavaScript only CSS

问题描述

当我仅使用CSS将鼠标悬停在图像B上时，我想知道如何更新图像A，这可能吗?如果不是的话，我将如何仅使用纯JavaScript(不使用库)来做到这一点.但是css确实是我想要使用的....

I would like to know how to update image A when I hover over image B using only CSS, is it possible? if not how will I do that using only pure JavaScript (no library). But css is really what I want to use....

推荐答案

正如我在评论中指出的那样，这完全取决于您的标记.在看不到任何标记的情况下，我只能发表一些一般性建议；但是，请务必注意，要影响的元素(F)必须比元素E您要与之交互的对象.

This depends entirely on your mark-up, as I pointed out in the comments. In the absence of seeing any mark-up to work with, I can only post some general suggestions; however it's important to note that the element you want to affect (F) must appear later in the DOM (be a child of the element F, or be subsequent sibling, or descendant of a subsequent sibling) than the element E with which you want to interact.

也就是说，以下方法以及相关的标记将起作用:

That said, the following approaches will work, with the associated mark-up:

使用E ~ F(通用同级)组合器，将鼠标悬停在#a内部的第一个img上，可切换随后的img元素的display:

Hovering over the first img inside of #a toggles the display of the subsequent img elements, using the E ~ F (general sibling) combinator:

<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上，可以使用E + F(立即同级)组合器在#b内部切换.first和.second图像的显示:

Hovering over #a changes switches the display of the .first and .second images inside of #b, using the E + F (immediate sibling) combinator:

<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是):

Using the E F general descendant combinator (I'm not actually entirely sure a space character is a combinator, but regardless...it's based on F being a descendant of 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 > F直接子代/立即后代组合器:

Using E > F the immediate-child/immediate-descendant combinator:

<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生成的内容的机会:

There's also the chance to use pseudo-elements and css-generated content (in compliant/up-to-date browsers):

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

这篇关于在没有JavaScript的情况下将图片悬停在图片B上时如何更改图片A的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！