为什么我的：悬停在引导容器中工作？

我的问题是，当标签在容器中时，“：hover +”不起作用。如果我将标签移动到容器外部，它可以正常工作。使用基本的div而不是引导程序容器会产生正确的结果。是否有什么阻止这种情况发生在引导程序库中？为什么我的：悬停在引导容器中工作？

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

来源

2016-01-24 Froy

'+'是一个兄弟选择。该链接不是'.container'的兄弟。 –

你能告诉我一个例子吗？我删除了+，但它没有解决问题。 – Froy

你能解释一下你想要发生什么吗？你想要悬停什么元素？当你悬停时会发生什么？ – tayvano

因为你想，当你将鼠标悬停在标签，以显示元素不是元素的子你徘徊在，它不会是有可能的目标通过CSS元素。

最好的办法是使用一些非常简单的javascript/jquery。

既然你正在使用Bootstrap，我会假设你正在加载jQuery。

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

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

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

在第二行中，我们首先抓取具有“test”类的元素。你也可以使用$（'＃test'）作为目标。现在我们有了这个元素，我们想要告诉它在我们将它悬停时做些事情。

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

就是这样。让我知道你是否有关于jQuery的问题。我不知道你对它有多熟悉，所以我很抱歉，如果这是显而易见的。

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

来源

2016-01-24 23:11:41 tayvano

如果你想找只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

来源

2016-01-24 23:15:43

为什么我的：悬停在引导容器中工作？

回答

相关问题