1

将鼠标悬停在导航选项卡上后，我需要显示图像。从下面的 ruby​​ 代码中，您可以看到我为每个导航提供了一个 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>

现在，我需要为每个导航显示带有上面“容器”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 回答