-3

行に4つの画像を含むdivと、次の行に4つすべての長さのdivがあります。

私がしたいのは、hover および 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>
4

2 に答える 2

0 
<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>
于 2013-04-12T16:50:24.257 に答える
0

以下のコードは、ここで動作していることがわかります: 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>
于 2013-04-12T16:47:53.773 に答える