Question

将鼠标悬停在导航标签上后，我需要显示图片。从下面的红宝石代码中你可以看到我给每个导航一个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”

我在线尝试了很多解决方案，但对我来说都没有。

Answer 1

很多可能取决于你想要在这里实现的整体设计，但是在css中需要与你正在悬停的元素和你想要影响的元素有一些父/兄弟关系。

例如：

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

在样式表中，您可以：li:hover div { background: red; }

由于div是LI元素的子元素，在你的例子中，你正在影响的div在dom中与你正在悬停的元素没有任何关系。这意味着您最有可能必须在javascript中执行此操作。

或者你可以在li元素中放置一个空元素，<i>通常很受欢迎，这种'icon'技术可以设置你的风格和背景图像，类似于产品查找器中的内容请点击此处：http://www.havells-sylvania.com/

Answer 2

就像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的代码示例，很难确切地说出你想要它的样式，所以只需从那里调整它。

使用CSS将鼠标悬停在另一个div上时显示div

2 个答案: