爲什麼我的：懸停在引導容器中工作？

我的問題是，當標籤在容器中時，「：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

爲什麼我的：懸停在引導容器中工作？

回答

相關問題