更改鼠標上的css類

嗨即時嘗試讓我的導航欄做鼠標懸停的CSS焦點效果，所以它不會改變，直到另一個菜單項有鼠標懸停。我試圖用JQuery來做。更改鼠標上的css類

這裏是我的代碼（我做了順便說一句，我的CSS類導入jQuery腳本）：

<div id="topNav"> 
<a href="contact.html"class="topNavNormal"><div id="topNav4" class="topNavNormal">Contact Us</div></a> 
<a href="about.html" class="topNavNormal"><div id="topNav3" class="topNavNormal">About Us</div></a> 
<a href="services.html" class="topNavNormal"><div id="topNav2" class="topNavNormal">Services</div></a> 
<a href="index.html" class="topNavActive"><div id="topNav1" class="topNavActive" style="border-left: 3px solid #c0c0c0;">Home</div></a> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#topNav1').mouseover(function(){ 
    $('#topNav1').removeClass().addClass('topNavActive'), 
    $('#topNav2').removeClass().addClass('topNavNormal'), 
    $('#topNav3').removeClass().addClass('topNavNormal'), 
    $('#topNav4').removeClass().addClass('topNavNormal'), 
    }); 
}), 
$('#topNav2').mouseover(function(){ 
    $('#topNav2').removeClass().addClass('topNavActive'), 
    $('#topNav1').removeClass().addClass('topNavNormal'), 
    $('#topNav3').removeClass().addClass('topNavNormal'), 
    $('#topNav4').removeClass().addClass('topNavNormal'), 
    }); 
}), 
$('#topNav3').mouseover(function(){ 
    $('#topNav3').removeClass().addClass('topNavActive'), 
    $('#topNav1').removeClass().addClass('topNavNormal'), 
    $('#topNav2').removeClass().addClass('topNavNormal'), 
    $('#topNav4').removeClass().addClass('topNavNormal'), 
    }); 
}), 
$('#topNav4').mouseover(function(){ 
    $('#topNav4').removeClass().addClass('topNavActive'), 
    $('#topNav1').removeClass().addClass('topNavNormal'), 
    $('#topNav3').removeClass().addClass('topNavNormal'), 
    $('#topNav2').removeClass().addClass('topNavNormal'), 
}); 
}); 
</script> 
</div>

而且這裏是我的CSS類：

<style type="text/css"> 
#topNav1 
{ 
text-align: center; 
font-size: 18px; 
float: right; 
width: 50px; 
height: 64px; 
} 
#topNav2 
{ 
text-align: center; 
font-size: 18px; 
float: right; 
width: 70px; 
height: 64px; 
} 
#topNav3 
{ 
text-align: center; 
font-size: 18px; 
float: right; 
width: 90px; 
height: 64px; 
} 
#topNav4 
{ 
text-align: center; 
font-size: 18px; 
float: right; 
width: 90px; 
height: 64px; 
} 
#topNav1, #topNav2, #topNav3{ 
border-right: 1px solid #c0c0c0; 
} 
#topNav4{ 
border-right: 3px solid #c0c0c0; 
} 
a .topNavNormal{ 
line-height: 54px; 
color: #42647F; 
} 
.topNavNormal{ 
background-color: #B0E0E6; 
} 
a .topNavActive{ 
line-height: 54px; 
color: #00EEEE; 
background-color: #5F9EA0; 
} 
</style>

來源

2011-08-31 Matthew

如果你不打算擔心ie6使用CSS選擇器'：hover' http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ –

我試着檢查CSS選擇器，但沒有我看到將專注於鼠標懸停（有一個懸停，但它一旦你的鼠標關閉它取消，但我只希望它在其他菜單項被突出顯示時取消）。另外我不能讓用戶點擊以專注，因爲點擊會進入新的頁面。 – Matthew

啊，我沒有完全站立，但現在我相信你的意思是最後一個懸停的項目將是這個「積極」類 –

如果你不在乎IE6玩 - 只需使用：懸停像詹姆斯一樣表示。否則，簡化代碼：

$(document).ready(function() { 
     $('#topNav a').hover(function() { 
      $(this).addClass('topNavActive'); 
     }, function() { 
      $(this).removeClass('topNavActive'); 
     }); 
    });

，如果你想immitate：焦點（但鼠標懸停）：

$(document).ready(function() { 
     $('#topNav a').hover(function() { 
      $(this).siblings().removeClass('topNavActive'); 
      $(this).addClass('topNavActive'); 
     } 
    });

是你需要什麼？

來源

2011-08-31 06:41:32 Samich

問題是，仍然是懸停。即時通訊嘗試使它像CSS選擇器：焦點而不必點擊激活它（就像它在鼠標懸停上一樣）。或換句話說，我不希望它不再被突出顯示，除非另有其他。 – Matthew

第二個函數回調將刪除將鼠標移動到其他元素時的高亮顯示。目前只有一個元素會突出顯示。 – Samich

好吧我一會兒起牀就會嘗試一下明天（我應該在2小時前睡着）。如果它起作用，我會將你的標記標記爲已接受的答案（但只有在它有效的情況下）。順便說一句，謝謝澄清，對我來說。 =） – Matthew

嘗試這樣的事情。

$('.topnav_class').over(function(){ 
     // delete all the classes of hover 
     $(.topnav_class).removeClass('hover'); 
     // add the hover class just to this node 
     $(this).addClass('hover); 
    }, function(){ 
     $(this).addClass('hover'); 
    });

你有$（本），更使你可以做你的jQuery多一點DRY（不要重複自己）

來源

2011-08-31 06:40:20

最好的做法是用純CSS解決它（根本沒有任何jQuery）。這裏有一個簡單的例子：

<style type="text/css">  
    .navItem { 
     background: yellow; 
    } 
    .navItem:hover { 
     background: blue; 
    } 
</style>

來源

2011-08-31 06:45:09 Michael

由於我希望它像下面這樣：focus CSS選擇器，因此它可以像懸停一樣被激活（但僅限於topNav項目），因此無法用於我需要的操作。它必須激活焦點懸停點擊它將打開鏈接。 – Matthew

.topNavNormal{ 
    background-color: #B0E0E6; 
} 

a .topNavNormal{ 
    line-height: 54px; 
    color: #42647F; 
}

如果你不使用這些不同的地方我會合並它們，然後你可以

a .topNavActive{  
    line-height: 54px; 
    color: #00EEEE; 
    background-color: #5F9EA0;  
}

和一個簡單的JavaScript，如：

$('topNavNormal').mouseover(function(){ 
    $('topNavNormal').removeClass('topNavActive'); 
    $(this).addClass('topNavNormal'); 
});

來源

2011-08-31 06:49:08

This Works for me

$(".panel").hover(function() { 
    $(this).addClass('panel-info'); 
    $(this).removeClass('panel-warning'); 
}, function() { 
    $(this).removeClass('panel-info'); 
    $(this).addClass('panel-warning'); 
});

來源

2016-01-08 16:00:24

更改鼠標上的css類

回答

相關問題