1

ナビゲーションタブにカーソルを合わせたら、画像を表示する必要があります。以下のルビーコードから、各ナビゲーションにIDを指定していることがわかります（必要に応じてクラスも指定できます）。

<div class="top-container">
<nav class="navbar">
  <ul>
  <% Placement.all.each do |placement| %>
  <li class=<%= "highlightedTopNav" if placement.id==params[:id].to_i %>> <%= link_to placement.placementname, placement_path(placement.id), :id => placement.placementname %> </li>
  <%end%>
  </ul>
</nav>
</div> 

<div class="container">
  <div style="background-image:url('images/pointingup.png');">
    <img src="images/...">
  </div>
</div>

次に、ナビゲーションごとに上記の「container」divを使用して異なる画像を表示する必要があります

私はオンラインで多くの解決策を試しましたが、どれもうまくいきませんでした。

4

2 に答える 2

2

多くは、ここで達成しようとしていることの全体的な設計に依存する可能性がありますが、cssでは、ホバーしている要素および影響を与えたい要素との親/兄弟関係が必要です。

例えば：

<li>
   <div>Hello</div>
</li>

スタイルシートでは、次のことができます。li:hover div { background: red; }

divは機能するLI要素の子であるため、この例では、影響を与えているdivは、ホバーしている要素とdom内で関係がありません。つまり、JavaScriptでこれを行う必要がある可能性が最も高いということです。

または、li要素内に空の要素を配置することもできます。<i>これは、この種の「アイコン」手法で一般的に人気があり、製品ファインダーのドロップダウンで行われているのと同様に、スタイルと背景画像を設定します。http：// www.havells-sylvania.com/

于 2013-01-13T16:20:42.930 に答える
1

Barking Tigerが述べたように、<div>cssのみを使用できるようにするには、表示はホバーしているものの子である必要があります。

ただし、JavascriptまたはjQueryを使用する場合は、次のような方法を試すことができます。

$("#navid").hover(
  function () {
    $(this).show(IMAGE);
  },
  function () {
    $(this).hide(IMAGE);
  }
);

編集：子の画像を持っていてもかまわない場合は、おそらく次のようなことをします：

HTMLが次のようになってしまった場合：

これらの線に沿って何かを実行して、ホバー時に画像を変更します。

#navid
{

}

#navid:hover .hidden
{
    display:block;
}

.hidden
{
        display:none;
        position:absolute;
        z-index:999;
        top:10;
        left:10px;

}

絶対位置とz-indexに注意してください。これにより、画像がナビゲーションの前に表示されます。CSSのコードサンプルがないと、どのようにスタイルを設定するかを正確に判断するのは難しいため、そこから調整するだけです。

于 2013-01-13T16:27:14.117 に答える