Question

我有一个包含4个图像的div和一个div，它是下一行中所有4个的长度。

我想要做的是应用悬停和toggleclass函数，这样当您将鼠标悬停在4个顶行图像中的每一个上时，下面的div背景图像会发生变化。这可能吗？我该怎么做？

<div id="float3_1">
<img id= "twit" src= "face.jpg" width= "240px"> 
<img id = "twit" src= "twit.jpg" width= "240px"> 
<img id= "twit" src= "goog.jpg" width= "240px"> 
<img idc= "twit" src= "insta.jpg" width= "240px"> 
<div class="divbelow"></div>
</div>

<script type= "text/javascript">
$('#twit').hover(function () {
$(.divbelow).toggleClass('image1', 500);
}, function () {
$(this).toggleClass('image1', 1000 );
});
</script>

Answer 1

下面的代码可以看到它在这里工作： http://fiddle.jshell.net/FuzaC/2/

<div class="float3_1">
    <img class= "twit" src= "http://www.codeproject.com/KB/IP/ZetaTwitter/zetatwitter-03.png" width= "100"/> 
    <img class= "twit" src= "http://higher-and-higher.com/wp-content/uploads/2010/12/twitter-icon-1a.png" width= "100"/> 
    <img class= "twit" src= "http://tapdesigner.com/wp-content/uploads/2012/04/twitter.png" width= "00"/> 
    <img class= "twit" src= "http://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/256/social_twitter_box_blue.png" width= "100"/> 
</div>
<div id="div" style="height:256px">Content of the div</div>

<script type= "text/javascript">
$(function(){
    $('.twit').mouseenter(function(){
        $('#div').css('background','url('+$(this).attr('src')+')');
    });
});
 </script>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

<style>
    img { margin:0px; padding: 0px; float:left}
    .image1 { background-color:#333; }
    .image2 { background-color:#f00; }
    .image3 { background-color:#0f0; }
    .image4 { background-color:#00f; }
    #divbelow {clear:left}
</style>

<div id="float3_1">
    <img id="twit1" src="face.jpg" width="25%">
    <img id="twit2" src="twit.jpg" width="25%">
    <img id="twit3" src="goog.jpg" width="25%">
    <img id="twit4" src="insta.jpg" width="25%">
    <div id="divbelow">foo</div>
</div>

<script type= "text/javascript">
$(document).ready(function() {
    $('#float3_1 img').hover(function (e) {
        var imgclass='image'+((e.target.id).split('twit'))[1];
        console.log(imgclass);
        $('#divbelow').toggleClass(imgclass, 500);
    });
});
</script>

将鼠标悬停在一张图片上以淡化交换不同的图像或包含图像背景图像的div？

2 个答案: