Question

我在rails网站上使用haml和scss，我有一个“了解更多”的锚标签。我希望能够将鼠标悬停在锚标签上，并在可能的情况下仅使用CSS（SASS）显示带有“.tb-description”类的div。如何更改div.tb-description上的显示样式？

haml代码：

.book
  %span.tb-message
    = number_to_currency(tb_array[0], :precision => 0)
    = link_to '#', :class=>"tb-learn-more-link" do
      learn more
.tb-description
  .tb-description-content
    This is text I want to display when the "tb-learn-more-link" anchor tag is hovered over

scss代码：

.tb-learn-more-link {
  text-decoration: underline;
  padding-left: .313em;
}
.tb-description {
  display: none;
  float: left;
  margin: 14px 0 0 10px;
  width: 250px;
}

Answer 1

你可以这样做：css中的hover伪类。 http://jsfiddle.net/W6V7r/

<a href="#" class="more">More...</a><div class="description">blah blah blah blah</div>

.more {

}
.description {
    display:none;
}
.more:hover+div.description{
    display:block;
}

编辑如果你无法从A标签转到DIV：hover那么你就会遇到点击并使用：target伪类。

<a href="#desc" class="more">More...</a>
<br><hr><br>
<div id="desc" class="description">blah blah blah blah</div>

.more {

}
.description {
    display:none;
}
div.description:target{
    display:block;
}

Answer 2

如果您想使用基于纯CSS的解决方案，则无法实现此目的。您必须在这两种解决方案之间进行选择：

保持实际的页面布局并通过javascript实施解决方案，聆听mouseenter / mouseleave个事件，然后相应地对隐藏的div应用更改
修改页面布局，以便您希望悬停的链接和隐藏的div是DOM结构中的兄弟。通过这种方式，您可以使用+ CSS运算符，并使用锚点上的div伪类隐藏/取消隐藏:hover

遗憾的是，CSS无法反向遍历DOM结构，因此当您悬停.tb-description时，您永远无法修改.tb-learn-more-link的方面，因为它们属于结构的不同分支。

Answer 3

你可以尝试

.tb-learn-more-link {
  text-decoration: underline;
  padding-left: .313em;
}
.tb-learn-more-link:hover .tb-description {
  display: none;
  float: left;
  margin: 14px 0 0 10px;
  width: 250px;
}

希望这有帮助

Answer 4

您可以使用CSS选择器和伪类。

HTML：

<div class="tb-description">
    Description
</div>
<div class="tb-description-content">
    Content on hover
</div>

CSS：

.tb-description+.tb-description-content {
    display: none;
}
.tb-description:hover+.tb-description-content {
    display: block;
}

仅使用CSS更改div上的显示样式

4 个答案: