如何将鼠标移到多个div上的按钮

有人能告诉我我的代码中有什么错误吗？该按钮无法点击并鼠标移出或鼠标移出。如何将鼠标移到多个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"); 
    }); 
});

来源

2015-11-04 shiro Jacinto

为什么在.usermainbody类中使用z-index：-2？ – akash

http://jsfiddle.net/fcq6vvte/ – akash

我只是尝试它，如果位置正在影响点击和鼠标在按钮..我应该删除它先生？..对不起一个noob问题 –

这是工作，但罪魁祸首却是在这里这条线：

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

W工作会有Demo

来源

2015-11-04 06:49:23

索引号先生... –

我应该删除z-index：-2; ？ –

似乎如此...删除 –

您在父类添加z-index:-2这就是为什么你不能连鼠标悬停在button

Working Demo

来源

2015-11-04 06:55:08 akash

就在.usermainbody类中删除z-index:-2。它会像魅力一样工作！

来源

2015-11-04 07:09:41 Vnuuk

从.usermainbody中删除z-index并更改changepass的左上角。

此外，您可以使用CSS伪类为您的鼠标悬停效果，而不是搜索DOM再次&并应用CSS。

.no-touch .changepass:hover{ 
    background-color : #3CDCF0; 
    color : #FFFFFF; 
    border-color :#3CDCF0; 
    }

来源

2015-11-04 07:44:07

如何将鼠标移到多个div上的按钮

回答

相关问题