0

私はドロップダウンメニューに取り組んでおり、ホバー効果を意図したとおりに動作させるのに苦労しました。ドロップダウンアクションを実行したい画像にカーソルを合わせると、これは正常に機能しています。しかし、画像の下のテキストが、テキストとドロップダウンメニューをつなぐタブのように機能することも必要です。

このjsfiddleの例をまとめて、大まかなアイデアを示しました。そのため、ボタンの上にカーソルを合わせると、「HOVER」テキストの背景が緑色に変わります。テキストの上に直接ホバーしたときにのみ緑色に変わります。実際のボタンの上にホバーしたときにホバー効果を実行したいと思います。これが理にかなっていると思いますか？

htmlはこちら：

<div class="menu">
<ul>
    <li><div class="btn"><p>HOVER</p></div>
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </li>
</ul>

そしてCSS：

.btn{
    display: block;
    width: 68px;
    height: 22px;
    padding-top: 70px;
    font-weight: bold;
    float: left;
    padding-right:30px;
    text-align:center;
}

.btn{
    background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}

.btn:hover{
    background-position: -5px -120px;
}

.menu ul li{
    list-style:none;
}

.menu{
    display: inline;
    float: left;
    padding-right:30px;
    padding:20px 0 0 20px;
}

a{
    text-decoration:none;
    color:#000;
}

.btn p{
    font-family:Arial;
    padding:10px;
    color:#000;
    padding:5px;
    border-radius:5px;
}

.btn p:hover{
    background:#78a802;
    cursor:pointer;
    color:#fff;
}

.menu ul li ul{
    display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:95px;
}

.menu ul li:hover ul{
    display:block;
    padding:15px;
    line-height:30px;
}

.menu ul li a:hover{
    color:#fff;
}

どんな助けでも大歓迎です！

4

2 に答える 2

2

これを追加

li:hover div{  background-position: -5px -120px; color:green}

デモ

テキストの背景色については、テキストの周りに別のタグを追加する必要があります

li:hover span{  background-color:#78a802; color:green; display:block} 
li:hover div{  background-position: -5px -120px; color:green}

デモ 2 更新

于 2013-02-14T11:51:16.723 に答える
0

CSS に次のプロパティを追加します。

.btn:hover p {
    background-color: #78a802;
}

Fiddle リンクを更新しました。

于 2013-02-14T12:03:19.803 に答える