我的问题是，虽然 a 标签在容器中，但“:hover +”不起作用。如果我将 a 标签移到容器外，它就可以正常工作。使用基本的 div 而不是 Bootstrap 容器会产生正确的结果。有什么东西可以阻止这种情况在 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;
}
最佳答案
因为当您将鼠标悬停在标签上时要显示的元素不是您悬停在其上的元素的子元素，因此不可能通过 CSS 定位该元素。
最好的办法是使用一些非常简单的 javascript/jquery。
由于您使用的是 Bootstrap，我假设您正在加载 jQuery。
这是一个代码笔: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 隐藏和显示的元素上。
关于html - 为什么不是我的 :hover working in bootstrap container?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34982126/