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