如何更改div時我將鼠標懸停鋰

Question

我的意圖

當我hover在li#featuredThumbs li我要交換我怎樣才能做到這一點div下#productText

？我想添加一個活動狀態到li和div。我也希望它在頁面加載時自動啓動。

Here is my jsFiddle File

JS

$("#featuredThumbs li").hover(function() { 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
});​ 

HTML

<div id="container"> 
    <h2>Lorem ipsum!</h2> 
    <div id="featuredProducts"> 
    <div id="productText"> 
     <div id="autoText" class="products"> 
     <h3>Auto Insurance</h3> 
     <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p> 
     </div> 
     <!-- eo : products --> 
     <div id="homeText" class="products"> 
     <h3>Auto Insurance</h3> 
     <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p> 
     </div> 
     <!-- eo : products --> 
     <div id="commercialText" class="products"> 
     <h3>Auto Insurance</h3> 
     <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p> 
     </div> 
     <!-- eo : products --> 
     <div id="lifeText" class="products"> 
     <h3>Auto Insurance</h3> 
     <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p> 
     </div> 
     <!-- eo : products --> 

    </div> 
    <!-- eo: productText --> 
    <ul id="featuredThumbs"> 
     <li id="autoProd"></li> 
     <li id="homeProd"></li> 
     <li id="commercialProd"></li> 
     <li id="lifeProd"></li> 
    </ul> 
    </div> 
    <!-- eo : featuredProducts --> 

</div> 
​ 

Answer 1

我想，這可能會幫助您：

CSS：

.products { display:none; } 
.products.active { display:block; } 

JS：

$("#featuredThumbs li").hover(function() { 
    $(".active").removeClass("active"); 
    var textid = this.id.replace("Prod", "Text"); 
    $(this).addClass("active"); 
    $("#" + textid).addClass("active"); 
});​ 

只要li元素的id以'Prod'結尾並且匹配文本以'Text'結尾，就可以工作。我還將類active添加到第一個div。

http://jsfiddle.net/KfEuL/

Answer 2

你的意思是這樣？

document.getElementById('featuredThumbs').onmouseover = function() { 
    document.getElementById('productText').innerHTML = 'swap'; 
} 

Answer 3

試試這個

 $("#featuredThumbs li").hover( 
    function(){ 
      $(this).addClass("active"); 
      $(this).append($('#'+$(this).attr('id').replace('Prod','Text')).html()); 
     }, 
    function(){ 
      $(".active").removeClass("active"); 
      $(this).html(""); 
     } 
    );​ 

DEMO

Answer 4

你可以這樣說：

// activate first item 
$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active"); 

// set hover handler 
$("#featuredThumbs li").hover(function() { 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 

    // find div id based on li id 
    var liId = $(this).attr('id'); 
    var liIdParts = liId.split("-"); 
    var divId = liIdParts[0] + "Text"; 

    $("#" + divId) 
     .addClass("active") 
     .show() 
     .siblings() 
     .removeClass("active") 
     .hide();  
});​ 

DEMO

更新：支持自動切換

DEMO

var nextLi; 
var autoSwitch = setInterval(function(){ 
    var firstLi = $("#featuredThumbs li:first"); 

    if(nextLi == undefined){ 
     nextLi = firstLi; 
    }else{ 
     nextLi = nextLi.next("li"); 
     nextLi = (nextLi.length == 0) ? firstLi : nextLi; 
    } 
    switchToDivForLi(nextLi);  
}, 3000); 

$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active"); 

$("#featuredThumbs li").hover(function() { 
    switchToDivForLi($(this)); 

    if(autoSwitch != undefined){ 
     clearInterval(autoSwitch); 
    }   
}); 

function switchToDivForLi(liElement){ 
    $(".active").removeClass("active"); 
     liElement.addClass("active"); 

     var liId = liElement.attr('id'); 
     $("#" + liId.replace("Prod", "Text")) 
      .addClass("active") 
      .show() 
      .siblings() 
      .removeClass("active") 
      .hide(); 
} 

Answer 5

這是你在找什麼？

$(function() { 
    $("#featuredThumbs li").hover(function() { 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $('.products').hide(); 
      $('#' + this.id.replace('Prod','Text')).show() 
    }); 
});​​ 

不要忘記更改標題的產品申報單，所以你可以告訴他們分開（現在他們都說「汽車保險」）。我也添加到了的CSS：

.products { display: none; } 

---

爲了使它自動循環，這是全碼：

var intervalLen = 1000; //milliseconds 
$(function() { 
    $("#featuredThumbs li").mouseover(function() { 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $('.products').hide(); 
      $('#' + this.id.replace('Prod','Text')).show(); 

      clearInterval(interval); 
    }); 

    $("#featuredThumbs li").mouseout(function() { 
     interval = setInterval(showNext,intervalLen); 
    }); 
}); 

function showNext() { 
    var visible = $('div', $('#productText')).not(':hidden'); 
    var next = visible.next('.products'); 
    if(next.length == 0) { 
     next = $('div:first-child', $('#productText')); 
    } 
    visible.hide(); 
    next.show(); 
} 

var interval; 
​$(function() { 
    interval = setInterval(showNext,intervalLen); 
}); 

和CSS變化的額外線：

.products:not(:first-child) { display: none; } 

當用戶將鼠標懸停在一個項目上時它不會循環，因爲onmouseover事件會停止時間間隔，並且onmouseout會重新啓動它。您可以通過更改intervalLen