更改類：使用js懸停background-color
[英]change a class:hover background-color with js
問題描述
我已經讀了很多文章，但仍然不明白。 他們嘗試了很多方法，但仍然沒有運氣。
我的HTML中有這個
<a href="report.html" class="btn btn-success btn-lg">Button 1</a>
這是css懸停時會發生什么
.btn-success:hover,
.dropdown-toggle.btn-success {
background-color: yellow;
}
我想使用js將背景顏色更改為藍色。
4 個解決方案
解決方案1
0 2015-06-07 01:29:25
我不確定為什么只在CSS中進行更改時，為什么需要使用js來執行此操作。 但是如果必須的話，您可以使用
$('.btn-success').addClass('hoverClass');
在你的CSS中
.hoverClass:hover {
background: green;
}
解決方案2
0 2015-06-07 01:36:21
您可以通過更改類分配來實現。
首先為鏈接指定一個ID，以便我們可以將其隔離在dom中。
<a href="report.html" id="myButton" class="btn btn-success btn-lg">Button 1</a>
要更改該鏈接的外觀，您可以將類更改為btn btn-primary btn-lg“，“ btn-primary”的默認值為藍色。
document.getElementById("myButton").className = "btn btn-primary btn-lg";
解決方案3
0 2015-06-07 05:48:57
我不知道您為什么選擇js，因為CSS是滿足您需求的最佳選擇。 我想您可能會發現該鏈接的CSS有點“棘手”：它需要按照“ lvha”的順序編寫，即a：link，a：visited，a：hover和a：active
解決方案4
-2 2015-06-07 01:34:36
您需要兩個Javascript事件：鼠標移到鏈接上時觸發的“ onmouseover”和鼠標移離鏈接時觸發的“ onmouseout”。 我給你寫了一個簡短的例子。
<html>
<head>
<script type="text/javascript">
function hoverIn ( element )
{
element.style.background = "blue";
}
function hoverOut ( element )
{
element.style.background = "none";
}
</script>
</head>
<body>
<a href="report.html" onmouseover="hoverIn ( this );" onmouseout="hoverOut ( this );">Click Me</a>
</body>
CSS & JS 更改按鈕 hover 上的 div 背景顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.