怎么用JS实现鼠标经过变换背景和点击停留在这个背景上

JavaScript09

怎么用JS实现鼠标经过变换背景和点击停留在这个背景上,第1张

可以在 :hover 里加背景，这就有没有过的背景了，然后用 JS 处理 click 事件，给这个DOM加个类，比如 hover，然后在 css 里定义 .hover { background: .....}

https://jsfiddle.net/nrystd4z/

关键代码，（CSS 是用 SASS写的，看得懂嘛）

li {

&:hover {

background: #ffddcc

}

&.hover {

background: #ffddcc

}

}

$(function() {

$("li").on("click", function() {

$(this).siblings().removeClass("hover")

$(this).addClass("hover")

})

})

用jquery做的话，代码如下:

<title></title>

<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$(".logo").mouseenter(function () {

$(".logo_pass").css("display", "block")

}).mouseout(function () {

$(".logo_pass").css("display", "none")

})

})

</script>

</head>

<body>

<div class="logo">111</div>

<div class="logo_pass" style="display:none">222</div>

</body>

</html>

js的话：

给div设置id比较好做

<script type="text/javascript">

window.onload = function () {

var logo = document.getElementById("logo")

logo.onmouseover = function () {

document.getElementById("logo_pass").setAttribute("style", "display:block")

}

logo.onmouseout = function () {

document.getElementById("logo_pass").setAttribute("style", "display:none")

}

}

</script>

</head>

<body>

<div id="logo">111</div>

<div id="logo_pass" style="display:none">222</div>

</body>