Question

我的问题是，当a标签位于容器中时，＆＃34;：hover +＆＃34;不起作用。如果我将a标签移到容器外面，它可以正常工作。使用基本div而不是bootstrap容器会产生正确的结果。是否存在阻止这种情况发生在引导程序库中的东西？

HTML：

<head>
  <title>Bootstrap Example</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <a href="#" class="test" id="tst">test</a>
      </div>
      <div class="col-sm-4">
        <div class="info">
          <h1>Info</h1>
          <div class="info-box">
            <div class="one">one</div>
            <div class="two">two</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

info{
  text-align:center;
}
.info-box{
  width: 70%;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
.one, .two{
  display: none;
}


a:hover  .container 
> .row > .col-sm-4
> .info > .info-box 
>.one{
  display: block;
}

Codepen

Answer 1

因为当您将鼠标悬停在标记上时要显示的元素不是您正在悬停的元素的子元素，因此无法通过CSS定位元素。

你最好的选择是使用一些非常简单的javascript / jquery。

由于您使用的是Bootstrap，我假设您正在加载jQuery。

这是一个codepen：http://codepen.io/anon/pen/WrMPXY

$(document).ready(function(){
    $('.test').hover(function() {
      $('.one').toggle();
    });
});

让我们来看看jQuery正在做什么。第一行简单地说“当页面加载时，执行此操作......”

在第二行中，我们首先使用“test”类抓取元素。您还可以使用$（'#test'）来定位具有id的内容。现在我们有了这个元素，当我们将鼠标悬停在它上面时，我们想告诉它做一些事情。

第三行以我们想要做的元素开头，在这种情况下是一个类为“one”的元素。 “切换”功能是隐藏/显示的简单快捷方式。您还可以使用hide（）函数，show（）函数或者有趣的东西，如slideUp（），slideDown（）或slideToggle（）。

就是这样。如果您对jQuery有任何疑问，请告诉我。我不知道你对它有多熟悉，所以如果这一切都很明显我会道歉。

您需要的唯一CSS是默认状态“display：none;”在你想要隐藏和通过jQuery显示的元素上。

Answer 2

如果您只查找css解决方案，则必须col-sm-8:hover

.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
  display: block;
}

在这种情况下，您可以减少col-sm-8块的宽度。我刚刚将float添加到此课程中，您可以使用其他解决方案！

.col-sm-8 {
  float: left;
}

jsfiddle-link

为什么不是我的：悬停在bootstrap容器中工作？

2 个答案: