0

下面显示的是我的 html 代码的格式。在标题 div 我有一个图像。包含 div 内的每个框（框 1、框 2、框 3）都有链接（软件开发（框 1）、图形设计（框 2）和技术培训（框 3））。单击这些链接时，我将转到具有它们的单独页面自己的标题图像。所以我为每个框有 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;
}
4

3 回答 3

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)')

});....
于 2012-12-11T12:03:42.143 回答
0

看到这个：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);
});
});
于 2012-12-11T12:01:31.040 回答
0

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%;
}
于 2012-12-11T12:16:58.957 回答