-1

アイテム/メニューのリストがあり、リスト (li) をホバーすると、ホバーしたものに応じてアイコンを変更したい。どうすればこれを達成できますか? アイコンスパンをホバリングすると、スプライトを使用して画像が変更されます。しかし、それぞれの li をホバーすると変更したいと思います。いくつかのアイデアが必要です!

htmlは以下です

<div class="short-menu">
   <ul class="sm-ul">
        <li><span class="search-icon"></span><span>Search</span></li>
        <li><span class="setting-icon"></span><span>settings</span></li>
    </ul>
</div>

CSS

/* list icons */
.search-ico { width:40px; height:40px; display:block; background:url(../img/icons/search.png) 0px 0px;}
.search-ico:hover { background:url(../img/icons/search.png) 0px -39px;}
4

6 に答える 6

2

私があなたの質問を正しく理解していれば、ホバー効果を li 要素によってトリガーし、その li 内の span 要素に適用したいですか?

もしそうなら、あなたはこれを行うことができます：

.sm-ul li:hover .search-icon{background:url(../img/icons/search_hover.png) 0px -39px;}

これは、ホバーが li を横切っていることを意味しますが、効果はその子要素で発生します。ここで実際にそれを見てください：

http://jsfiddle.net/6Y3mU/

于 2013-08-06T08:44:16.460 に答える
0

方法 1:Jquery:

$("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

方法 2: css:

li .search-icon:hover {
//change background(make icon as background image)
}
于 2013-08-06T08:43:21.077 に答える