javascript - 如何将鼠标悬停在多个div中

有人可以告诉我代码中的错误是什么吗？该按钮无法单击，也无法将鼠标悬停或滑出。

我也尝试

$(".userborder")find(".changepass").mouseover(function(){
    $(".changepass").css("background-color","#3CDCF0");
    $(".changepass").css("color", "#FFFFFF");
    $(".changepass").css("border-color", "#3CDCF0");
});

但是没用...

的HTML

<div class="userborder">

<div class="userheader">
    <label class="headertext">USER</label>
</div>

<div class="usermainbody">
    <img src="images/default_profile.png" class="usersimage" width="110px" height="110px">
    <br>
    <br>
    <label class="labelstyle">Employee Number</label>
    <br>
    <br>
    <label class="labelstyle">First Name</label>
    <br>
    <br>
    <label class="labelstyle">Middle Name</label>
    <br>
    <br>
    <label class="labelstyle">last Name</label>
    <br>
    <br>
    <button class="changepass" onClick="test()">Change password</button>
    </div>
</div>

的CSS

.usermainbody
{
border: 1px solid #CDC7C7;
position:relative;
z-index:-2;

}

.usersimage
{
position:relative;
margin-left:15px;
z-index:1;
}
.labelstyle
{
position:relative;
top:-115px;
left:145px;
font-size:12.5px;
z-index:1;
}

.changepass
{
position:relative;
font-size:12.5px;
background-color:#07A1B4;
color:#DCD1D1;
border-radius:5px;
border-color:#07A1B4;
height:25px;
width:130px;
z-index:2;
top:-507px;
left:730px;
}

JQUERY

$(document).ready(function(){
    $(".userborder .changepass").mouseover(function(){
        $(".changepass").css("background-color","#3CDCF0");
        $(".changepass").css("color", "#FFFFFF");
        $(".changepass").css("border-color", "#3CDCF0");
    });
    $(".userborder .changepass").mouseout(function(){
        $(".changepass").css("background-color","#07A1B4");
        $(".changepass").css("color", "#DCD1D1");
        $(".changepass").css("border-color", "#07A1B4");
    });
});

最佳答案

它正在工作，但罪魁祸首在这里：

.usermainbody{
  border: 1px solid #CDC7C7;
  position:relative;
  z-index:-2; // <-- here, so do you really need this?
}

还有一件事情，您可以将css属性分组为像对象这样的对象：

$(".changepass").css({
    "background-color"  : "#3CDCF0",
    "color"             : "#FFFFFF",
    "border-color"      : "#3CDCF0"
});

您可以使用.hover()函数：

$(".changepass").hover(
  function () { //<--- hover in
    $(this).css({
        "background-color": "#3CDCF0",
        "color": "#FFFFFF",
        "border-color": "#3CDCF0"
    });

 },
 function () { //<--- hover out
   $(this).css({
       "background-color": "#07A1B4",
       "color": "#DCD1D1",
       "border-color": "#07A1B4"
   });
});

工作Demo

关于javascript - 如何将鼠标悬停在多个div中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33515262/