1

こんな感じのメニューが使えるようにしようと思っています

公平を期すために、私はこれをほとんど理解していませんでしたが、ホバー機能でスタイルを使用できると知らされました.

これが私のコードで試したことです:

<center>
    <ul>
        <li>
            <a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></a>
        </li>
        <li>
            <a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></a>
            <img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
            <a href="audiorageAbout.aspx"><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></a>
            <a href="audiorageCart.aspx"><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></a>
        </li>                    
    </ul>
</center>
<br />
<center>
    <div class="showMe">I want this to show!!</div>
</center>

ここにCSSがあります

.showMe
{ 
display: none;
}
.showHim:hover .showMe
{
display: block;
}

JSFIDDLEへのコードの既成のリンクを次に示します。

4

3 に答える 3

1

の子と一緒にホバーしていることをdisplay:blockルールが探しているため、これは機能しません。いくつかの方法でそれを行うことができます。.showHim.showMe


非表示の子をターゲットにする: jsFiddle

CSS

.hoverme:hover .showMe {
    display: block;
}

HTML

<span class="hoverme">
    <img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
    <span class="showMe">I want this to show!!</span>
</span>

または、兄弟の jsFiddleをターゲットにする

CSS

.showHim:hover + .showMe {表示: ブロック; }

HTML

<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<span class="showMe">I want this to show!!</span>

典型的なメニューはこのように構成されているため、非表示のアイテムを簡単にターゲットにすることができます. jsフィドル

HTML

<ul class="menu">
    <li>
        Some menu item
        <ul class="submenu">
            <li>Sub menu item</li>
        </ul>
    </li>
    ...
 </ul>

CSS

.submenu {
    display:none;
}
.menu > li:hover .submenu {
    display:block;
}
于 2013-04-05T11:36:50.677 に答える
0

if work を行うには、ここで jQuery を使用する必要があります。

    $(".showHim").hover(
      function () {
        $('.showMe').css("display","block");
      },
      function () {
        $('.showMe').css("display","none");
      }
    );
   });

ここでの作業例

于 2013-04-05T11:45:57.353 に答える
0

このためには、html 構造を変更する必要があります

htmlコード

<center>
    <ul>
        <li><a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></a></li>
        <li><a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></a></li>
        <li class="showHim"><img src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
        <div class="showMe">I want this to show!!</div></li>
        <li><a href="audiorageAbout.aspx"><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></a></li>
        <li><a href="audiorageCart.aspx"><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></a></li>                 
    </ul>
</center>

CSSコード

.showMe{ 
    display: none;
}
.showHim:hover .showMe{
    display: block;
}

JsFiddle ファイル

于 2013-04-05T13:15:37.780 に答える