Question

#menu{
    opacity: 0;
    margin: 100px auto;
    background-color: #edf4da;
    border-style: solid;
    border-width: 1px;
    border-color: #c4efb6;
    width: 600px;
    height: 300px;
    -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
            border-radius: 12px;
}

.shadow{
    box-shadow: 0px 0px 5px #888888;
}


#startButton{
    opacity: 0.5;
    margin: 20px auto;
    background-color: #54fb8d;
    border-style: solid;
    border-width: 1px;
    border-color: #c4efb6;
    width: 90px;
    height: 40px;
    -webkit-border-radius: 7x;
        -moz-border-radius: 7px;
            border-radius: 7px;
}



#startButton:hover #menu{  /*this is where I am having a problem*/
    opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
}

//////// HTML ////

<!DOCTYPE html>
<html>
<head>
<title>Ubiquity</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="menuwbutton">
    <div id="menu"> 
    </div>
    <div id="startButton">
    </div>
</div>

</body>

</html>

当我将鼠标悬停在#startButton上时，我希望#menu的不透明度发生变化。我搜索过，但是我没有找到关于这个主题的任何信息。如果已经问过这个问题，你能给我一个链接吗？谢谢！

Answer 1

我会在Javascript中执行此操作。示例jQuery代码：

$("#startButton").hover(function(){
   $("#menu").fadeTo(500,1); 
}, function(){
    $("#menu").fadeTo(500,0);
});

仅仅因为jQuery很有趣

或类似的东西，所以你可以使用菜单：

$("#startButton").hover(function(){
    $("#menu").fadeTo("500", 1); 
}, function(){});

$("#menu").hover(function(){}, function() {
    $("#menu").fadeTo("500", 0);
});

在单独按钮悬停时更改图像的不透明度

1 个答案: