0 
#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 的不透明度发生变化。我已经搜索过，但我没有找到有关此主题的任何信息。如果这个问题已经被问过，你能给我一个链接吗？谢谢！

4

1 回答 1

0

我会在 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);
});
于 2013-10-09T02:16:14.673 回答