的CSS visibility屬性DIV1徘徊另一個DIV（DIV2）

我躲在帶班的.text一個div的CSS visibility屬性DIV1徘徊另一個DIV（DIV2）

div.text{ 

visibility:hidden; 
     }

這個div被另一個分度類.col3

<div class="col3"> 
<div class="image-box"> 
<div class="text"> test </div> 
</div> 
</div>

包圍我想的可視性更改爲「可見」當我將鼠標懸停COL3

我試圖

.col3:hover + div.text { 

visibility:visible; 
}

然而，它似乎不工作這種方式。奇怪的是，當我這樣做

.image-box:hover + div.text{ 
visibility:visible; 
    }

它確實顯示文本的div當我懸停圖像盒，但那不是我想要的，我希望它表明，當我將鼠標懸停周圍的div .... ..

任何幫助，歡迎...

來源

2013-10-28 Jef Rechards

這應該工作：

.col3:hover div.text { 
    visibility:visible; 
}

使用該+選擇的是不正確的，它的目標可怕的元素遵循第一個元素。更多的信息可以在here找到。

來源

2013-10-28 10:20:30 AfromanJ

爲什麼你

.col3:hover + div.text

不工作的原因是因爲你使用的是相鄰的選擇。你基本上說的是「把任何帶有課文的div節點放在與.col3相同的層次上，並在.col3徘徊時用它做些事情」。但是沒有。 div.text與.col3不在同一層，而是它的直接子。

你想要做的是：

.col3:hover > div.text { 
    visibility:visible; 
}

它說「採取任何div.text這是.col3直接子節點，並用它做什麼，當.col3懸停」。

來源

2013-10-28 10:22:16

+在CSS中被稱爲"adjacent sibling combinator"。同胞是與另一個元素包含在同一父元素中的元素。在這種情況下，您的.image-box元素是您的.text元素的同胞。這兩個元素都是您的.col3元素的子元素。您的第一個選擇器不會選擇任何內容.text不是.col3的兄弟。

你需要使用一個descendant combinator：

.col3:hover div.text { 
    visibility: visible; 
}

還是一個child combinator：

.col3:hover > div.text { 
    visibility: visible; 
}

來源

2013-10-28 10:23:32

的CSS visibility屬性DIV1徘徊另一個DIV（DIV2）

回答

相關問題