Question

以下显示的是我的html代码的格式。在标题div中我有一个图像。包含div内的每个框（box1，box2，box3）都有内部链接（如软件开发（box1），图形设计（box2）和技术培训（box3）。点击这些链接会将我带到单独的页面中我拥有每个方框的3个标题图像和主页中的默认标题图像。在主页中，当我将鼠标悬停在box1 div时，标题图像应该更改为box1标题图像，并带有效果喜欢fadeIn并在鼠标输出时返回我的默认图像。与box2和box3相同。请帮我用CSS或JS或jQuery做这个。谢谢

<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 demo

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>

MODIFIED CSS PART：

/*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上时，更改div中的图像与fadein之类的任何效果

3 个答案:

jsBin demo