javascript - 如何将鼠标悬停在多个div中的按钮上

Question

有人能告诉我我的代码中有什么错误吗？该按钮也无法单击和鼠标悬停或鼠标移开。

我也试试

$(".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");
    });
});

Answer 1

它正在工作，但罪魁祸首就在这一行:

.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