0

私のウェブサイトでは、ロールオーバー効果を機能させようとしています。
現在、 ではno mouse hoverアイテムul liはテキストとして表示されますが、mouse hoverではイメージを表示するロールオーバー効果があります。

通常のマウスの非ホバー状態でテキストを表示する代わりに、画像を表示したいと考えています。
つまり、マウス ホバーと非マウス ホバーはどちらも異なる画像であり、
現在持っているものとは対照的に、そのようなロールオーバー効果を機能させるにはどうすればよいかを尋ねたいテキストはありません。（非マウスホバーは画像にも変更したいテキストです）

これは、現在ロールオーバーがどのように行われているかの jsfiddle です: http://jsfiddle.net/PF35v/7/

4

2 に答える 2

0

デフォルトではすべての画像が非表示になっているため、aタグ内に画像を配置すると、それも非表示になります。

ul#nav li a img { display: block; }

これにより、リンク内の画像は常に表示されますが、他の画像はデフォルトで非表示になります。それがあなたが求めていることだと思います。

于 2012-08-11T15:31:17.640 に答える
0

ここに2つの異なるアプローチがありますが、他にもあると確信しています：

HTML中心

<ul id="nav">
    <li>
        <a href="#">
            <span>My Text</span>
            <img src="http://goo.gl/tYsDU"/>
            <img class="hover" src="http://goo.gl/UohAz"/>
        </a>
    </li>
    ...
</ul>

#nav,
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li a img {
    display: inline;
}
#nav li a img.hover,
#nav li a span {
    display: none;
}
#nav li a:hover img {
    display: none;
}
#nav li a:hover img.hover {
    display: inline;
}

http://jsfiddle.net/RdRcj/1

CSS中心

<ul id="nav">
    <li>
        <a href="#" alt="My Text"></a>
    </li>
    ...
</ul>

#nav,
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    width: 128px;
    height: 128px;
    background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
    display: block;
    width: 128px;
    height: 128px;
    padding: 0;
}
#nav li a:hover {
    background-image: url(http://goo.gl/UohAz);
}

http://jsfiddle.net/RdRcj/

柔軟性の観点からは、おそらく最初のものが「最良」です。2番目のように寸法をハードベイクする必要はありません。ただし、それらが変更されていない場合は、おそらく 2 番目の方法がアプローチに適していliますa。

于 2012-08-11T15:53:33.800 に答える