使用Javascript按鈕切換CSS懸停元素

是否可以使用Javascript切換懸停時更改的元素。我想建立一個按鈕，它允許div從兩種不同的狀態中改變：（1）div未被徘徊時;（2）div被徘徊時。使用Javascript按鈕切換CSS懸停元素

任何建議如何做到這一點？

謝謝！

2011-02-23 TronCraze

-1

<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />

來源

2011-02-23 01:55:27 sarath

-1

，你可以嘗試使用jQuery這將使它更容易。 $（'＃divId'）。css（'hover'，function（index）{whatever;}）;

如果你不喜歡讓我知道，我可以抓我的大腦如何在直接js做到這一點。

來源

2011-02-23 01:56:08 richsoni

這當然是可能單獨CSS來做到這一點：

div { background-color:#000; } 
div:hover { background-color:#cc0000; }

當你將鼠標懸停在div背景顏色將變爲由黑變紅。

這是我的意見，使用JavaScript的這項任務是矯枉過正。您可以使用:hover僞選擇器來做一些非常複雜的事情。考慮這個標記（和CSS）：

<div>I'm just a div <h1>I'm just an h1</h1></div>

div h1 { font-size:10px; font-weight:normal; } 
div:hover { border:1px dotted #000; } 
div:hover h1 { font-size:32px; font-weight:bold; color:#cc0000; }

正如你所看到的，我們可以在規則中使用的:hover選擇像上面不僅風格懸停的元素，但任何子元素，以及。這個前提是大量的「飛出」導航只需要嵌套多於ul s。

來源

2011-02-23 01:56:55

div：懸停不是100％跨瀏覽器兼容 – TNC 2011-02-23 02:02:21

我想你的聲明應該是「div：懸停不是100％跨瀏覽器兼容」。這是真的。默認情況下，IE 6不喜歡'：hover'而不是'a'標籤。如果需要IE 6支持，請查看http://code.google.com/p/ie7-js/。這個腳本可以在任何元素上使用'：hover'（等等）。 – 2011-02-23 02:05:03

@truenorth除IE6之外，還有哪些瀏覽器無法處理它？ – ClosureCowboy 2011-02-23 02:05:26

你當然可以！

你可以這樣做：

的jQuery：

$("#mydiv").hover(function() 
{ 
    $(this).toggleClass("active"); 
    // or $(this).toggle(); 
    } 
);

標準的JavaScript：

function toggle(obj) 
{ 
    var item = document.getElementById(obj); 
    if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; } 
    else { item.style.visibility = 'visible'; } 
}

HTML：

<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');" id="mydiv">Hover</div>

來源

2011-02-23 01:58:22 TNC

使用Javascript按鈕切換CSS懸停元素

回答

相關問題