1

我想知道当我只使用 CSS 将鼠标悬停在图像 B 上时如何更新图像 A，这可能吗？如果不是，我将如何仅使用纯 JavaScript（无库）来做到这一点。但是css真的是我想要使用的......

4

4 回答 4

6

正如我在评论中指出的那样，这完全取决于您的加价。在没有看到任何可以使用的标记的情况下，我只能发布一些一般性建议；但是重要的是要注意，您想要影响的元素 ( 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 > 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;
}​

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

于 2012-06-11T17:37:12.490 回答
3

在您的特定情况下，这很容易，因为#bg是#hv

只需将悬停选择器从您所拥有的更改为：

#bg:hover #hv {...}

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

于 2012-06-11T15:59:21.277 回答
2

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

请参阅此工作小提琴示例！

#bg:hover #hv {
   ...
}
于 2012-06-11T15:59:36.427 回答
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*/
于 2012-06-11T15:50:26.083 回答