有div更改背景位置上懸停，而活動

我有我的HTML & CSS下面。有div更改背景位置上懸停，而活動

我有一個div與span裏面。一切都在默認的家中排隊。

我想將鼠標移過About(id=Hover2)時，它會將div (id=divHolder)移動到下面列出的正確背景位置。另外如果我點擊About。

該div的正確背景位置處於活動狀態。

謝謝！

HTML：

<div id="nav"> 
    <div id="divHolder"> 
     <span id="highlight"></span> 
    </div> 
    <ul class="clearfix"> 
     <li><a id="Hover1" href="Default.aspx">Home</a> </li> 
     <li><a id="Hover2" href="About.aspx">About</a> </li> 
     <li><a id="Hover3" href="">Profile</a> </li> 
     <li><a id="Hover4" href="">News</a> </li> 
     <li><a id="Hover5" href="">Contact</a> </li> 
    </ul> 
</div>

CSS：

#divHolder { 
    height: 62px; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    top: 17px; 
    width: 505px; 

    } 
#highlight { 
    background: url("/Styles/background-highlight.png") repeat scroll 0 0 transparent; 
    display: block; 
    height: 62px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 124px; 
} 

    #divHolder.Hover1 {background-position:0px 0px} 
    #divHolder.Hover2 {background-position:0px 80px} 
    #divHolder.Hover3 {background-position:0px 160px} 
    #divHolder.Hover4 {background-position:0px 240px} 
    #divHolder.Hover5 {background-position:0px 320px}

來源

2013-08-21 ChelseaBlue1

我得到這個工作你在這裏：

http://jsfiddle.net/xgkHH/

這是jQuery的我不得不使用：

$("#nav li").on("mouseenter",function() { 
    classtoadd = $(this).children("a").attr("id"); 
    $("#highlight").addClass(classtoadd); 
}); 
$("#nav li").on("mouseleave",function() { 
    // remove all classes. 
    $("#highlight").removeClass(); 
});

我沒有在改變你的HTML所有，但這是我做你的CSS：

#highlight.Hover1 {background-position:0px 0px;} 
    #highlight.Hover2 {background-position:0px 80px;} 
    #highlight.Hover3 {background-position:0px 160px;} 
    #highlight.Hover4 {background-position:0px 240px;} 
    #highlight.Hover5 {background-position:0px 320px;}

來源

2013-08-21 15:41:43

這工作，我只是背景的位置的高度和寬度倒退。現在我只需要弄清楚對齊bc圖片是不是匹配到李，謝謝！ – ChelseaBlue1

所以這將添加懸停類，但如何在鏈接處於活動狀態時如何添加一個類以相同的方式？ – ChelseaBlue1

只要確保你實際上可以懸停的元素。使用你的代碼，它看起來像跨度覆蓋了一些阻止懸停的鏈接。

$('#Hover2').hover(
    function(){ 
     $('#divHolder').addClass('Hover2'); 
    }, 
    function(){ 
     $('#divHolder').removeClass('Hover2'); 
    } 
); 

$('#Hover2').on('click', function(){ 
    $('#divHolder').addClass('Hover2');//or whatever you want to do on click 
});

來源

2013-08-21 15:41:20 carter

有div更改背景位置上懸停，而活動

回答

相關問題