當鼠標懸停在另一個div上時，以dividein之類的任何效果更改div中的圖像

Question

下面顯示的是我的html代碼的格式。 在標題div中，我有一個圖像。 包含div中的每個box（box1，box2，box3）在內部都有鏈接，例如：軟件開發（box1），圖形設計（box2）和技術培訓（box3）。單擊這些鏈接會將我帶到單獨的頁面，這些頁面具有擁有自己的標題圖片，因此每個框都有3個標題圖片，主頁中有一個默認標題圖片。在主頁中，當我將鼠標懸停在box1 div中時，標題圖片應更改為具有效果的box1標題圖片像fadeIn並在鼠標移出時返回我的默認圖像。box2和box3相同。

<body>
   <div class="wrapper">
      <div class="out">
         <div class="in">
            <div id="header"></div>
            <div class="contain">
               <div class="box1"></div>
               <div class="box2"></div>
               <div class="box3"></div>
            </div>
         </div>
      </div>
   </div>
</body>

CSS：

.wrapper{
    width: 100%
    height: auto;
    margin: 0px;
}
.out{
    margin: auto;
    width: 1000px;
    height: 730px;
    border-top: 5px solid  #333333;
}
.in{
    width: 900px;
    height: 640px;
    margin: auto;
    margin-top: 25px;
}
#header{
    background:url(../img/Untitled-1.jpg);
    height: 175px;
    width: 900px;
    margin: 0px;
}
.contain{
    margin: 0px;
    width: 900px;
    height: 428px;
}
.box1{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 0px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box2{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 302px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box3{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 602px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}

Answer 1

我有一個BIN

我為所有3個div都放置了相同的圖像

  $('#content,#content2,#content3').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

您可以根據自己的圖像進行更改

 $('#content').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

 $('#content2').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});....

Answer 2

看到這個： http : //jsfiddle.net/xTjQT/2/

 $('a').mouseover(function() {
    var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
     $(this).attr('src', src);
     $(this).fadeIn(100);
});
});

$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
     $(this).attr('src', 'http://jsfiddle.net/img/logo.png');
     $(this).fadeIn(100);
});
});

Answer 3

jsBin演示

jQuery的：

var currPage = 0; // PLAY HERE: set here current page (0 = home)

var $header = $('#header');
var $headerImg = $header.find('img');

$headerImg.eq( currPage ).show().addClass('currentImg');

// clone images to boxes:
var c = 0;
$('.box').each(function( i ){

  $(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});


$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){

  var opacity = e.type=='mouseenter' ? 1 : 0 ;
  var myClass = $(this).prop('class'); // get class  
  var $mainImg = $header.find('img.'+myClass);


  $headerImg.hide();
  $mainImg.stop().fadeTo(300, opacity);
  $('.currentImg').stop().fadeTo(600, !opacity);


});

HTML：

<div class="wrapper">
  <div class="out">

     <div class="in">

        <div id="header">
          <img class="headImg1" src="home.jpg" alt="" />
          <img class="headImg2" src="ONE.jpg" alt="" />
          <img class="headImg3" src="TWO.jpg" alt="" />
          <img class="headImg4" src="THREE.jpg" alt="" />
        </div>

        <div class="contain">
           <div class="box">

          </div>
           <div class="box">

          </div>
           <div class="box">

          </div>
        </div>

     </div>


  </div>
 </div>

修改后的CSS零件：

/*ADDED*/
#header img{
  position:absolute;
  display:none;
}


.contain{
    margin: 0px;
    width: 900px;
    height: 428px;
}
.box{ /* CHANGED */
    height: 360px;
    width: 294px;
    float: left;
    margin: 67px 3px 0px;
    position: relative;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}

/* ADDED */
.box img{
  width:100%;
}

當鼠標懸停在另一個div上時，以dividein之類的任何效果更改div中的圖像

問題描述

3 個解決方案

解決方案1
1 2012-12-11 12:03:42

解決方案2
0 2012-12-11 12:01:31

解決方案3
0 已采納 2012-12-11 12:16:58

jsBin演示

當鼠標懸停在另一個div上時，以dividein之類的任何效果更改div中的圖像

問題描述

3 個解決方案

解決方案1 1 2012-12-11 12:03:42

解決方案2 0 2012-12-11 12:01:31

解決方案3 0 已采納 2012-12-11 12:16:58

jsBin演示

解決方案1
1 2012-12-11 12:03:42

解決方案2
0 2012-12-11 12:01:31

解決方案3
0 已采納 2012-12-11 12:16:58