Question

这可能是一个简单的问题，我在思考它。我有一种情况需要实现翻转效果。

我有Img1这是一个按钮。当用户在Img1上盘旋时，容器中的另一个img（Img2）将变为（Img3）。当用户不再悬停在Img1上时，Img3将变回Img2。

我希望这是有道理的。

编辑：

谢谢大家的帮助，很高兴知道有这么多人愿意提供帮助。我最终选择了对我来说最简单的答案，所以我道歉冒犯任何人。

这是我的最终答案（带代码）：

<!--SECTION 3-->
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////--> 
<section id="s3">
    <div class="container">
        <a href="/shopping.asp"><img class="btn" id="btn" src="/common/<%=site_version%>/img/s3_order_btn.png" draggable="false" alt=""></a>
        <img class="bulb" id="bulb" src="/common/<%=site_version%>/img/s3_bulb_noglow.png" draggable="false" alt="">
    </div>
</section>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////--> 
<!--END OF SECTION 3-->
<script>
$("#btn").hover(function(){
   // when mouseover
   $("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_glow.png");
},
function() {
  // when mouseout
  $("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_noglow.png");
});
</script>

Answer 1

使用此： - 我在这里假设Img1 Id是Img1等。

$("#Img1").hover(function(){
   // when mouseover
   $("#Img2").attr("src","paste your Img3 Url");
},
function() {
  // when mouseout
  $("#Img2").attr("src","paste your Img2 Url");
});

Answer 2

这听起来像是纯粹用HTML完成的事情：

<div class="outerImage" style="width:64px; height:64px; background:blue url('outer_image.jpg');">
    <img class="innerImageDefault" src="image2.jpg">
    <img class="innerImageHover" src="image3.jpg">
</div>

和CSS：

/* Position both of the inner images. */
.outerImage > img {
    float: right;
}

/* Hide the hidden image; hide the default image when hovered. */
.outerImage .innerImageHover,
.outerImage:hover .innerImageDefault {
     display: none;
 }

/* Show the hidden image when the outer image is hovered. */
.outerImage:hover .innerImageHover {
     display: inline-block;
 }

相当脏Proof of Concept on JSFiddle

Answer 3

您是否尝试过CSS :hover选择器？

<强> HTML ：

<div class="container">
    <div class="A">Hover me!</div>
    <p>lorem ipsum...</p>
    <div class="B">And I will highlight myself</div>
</div>

<强> CSS ：

div.container > div {
    display: inline-block;
    border: 1px solid #000;
    padding: 16px;
    margin: 16px;
    cursor: pointer;
    transition: background .4s;
    background: #fff;
}

div.container > div:hover ~ div {
    background: #ff0;
}

http://jsfiddle.net/1fwr9wfw/

在CSS中，您也可以更改background-image。

Answer 4

如果使用jQuery .hover()方法，只需知道它接受两个参数：

$("#Img1").hover(function(){
  // mouse enter
  $("#Img2").attr("src","paste your Img3 Url");
}, function(){
  // mouse leave
  $("#Img2").attr("src","paste your Img2 Url");
});

还可以进行其他优化，例如将原始Img2 src存储在某处，这样您就不必重新定义已有的网址，但这是另一个故事。

Answer 5

我会假设你的html看起来如此：

<img src="button.jpg" alt="button" id="mybutton" />
<img src="image1.jpg" alt="image 1" id="imagetochange" />

使用此javascript：

window.onload = function(){
    var btn = document.getElementById('mybutton');
    var img = document.getElementById('imagetochange');

    btn.onmouseover = function(){
        img.src = 'image2.jpg';
    };
    btn.onmouseout = function(){
        img.src = 'image1.jpg';
    };
};

<强> demo

使用JavaScript的翻转效果

5 个答案: