我正在为我的网站做一个功能,我想要一个相同的功能。
详细:当我将鼠标悬停在导航上时,我想使背景发光。
如果需要其他任何内容,请告诉我。
我希望我能理解你的问题。请参阅以下示例:
$(document).ready(function() {
$("ul li").mouseover(function () {
$(this).addClass('light-bg', 1000);
$('body').addClass('new-body-bg', 1000);
});
$("ul li").mouseleave(function () {
$(this).removeClass('light-bg', 1000);
$('body').removeClass('new-body-bg', 1000);
}); });
ul {
background-color: #ddd; /* Choose the color of your choice */
height: 40px;
}
li {
display: inline-block;
font-size: 18px;
padding: 10px;
line-height: 20px;
text-align: center;
margin-right: 15px;
}
.light-bg {
background-color: #fff; /* Choose the color of your choice */
line-height: 20px;
}
.new-body-bg {
background-color: #ccc; /* Choose the color of your choice */
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#"> One </a></li>
<li><a href="#"> Two </a></li>
<li><a href="#">Three </a></li>
<li><a href="#"> Four</a></li>
</ul>
它在 JsFiddle 上完美运行
参见:http://jsfiddle.net/snlacks/tekokmke/1/
不使用jQuery,
- 你想找到你想要这样做的所有元素
- 然后你想遍历它们
- 您将为每个侦听器应用两个侦听器,一个用于进入,一个用于离开。
.js:
var mes = document.querySelectorAll(".me");
function changeIn(){
document.body.style.backgroundColor = "lightgray";
}
function changeOut(){
document.body.style.backgroundColor = "darkgray";
}
for(i = 0; i < mes.length; i++){
mes[i].onmouseenter = changeIn;
mes[i].onmouseleave = changeOut;
}