懸停div的直接孩子的風格（只是CSS）

我想申請樣式的div [class*="high-"]p孩子徘徊（任何DIV開始高）時，但不是所有p孩子，只有徘徊裏面的一個家長。如果沒有jQuery需要，更好。

HTML：

<div class="high-venas"> 
     <p><strong>Venas y varices</strong><br> 
     <span>Lorem ipsum dolor sit amet</span></p> 
    </div> 

    <div class="high-cirugiaCalvicie"> 
     <p><strong>Cirujía calvicie</strong><br> 
     <span>Lorem ipsum dolor sit amet nonummy nibh </span></p> 
    </div>

CSS：

#highlights p { 
    background-color: white; 
    opacity:0.7; 
}

，因爲我已經沒有結果嘗試這些例子到這裏，我認爲這可以通過選擇造成的，也許它是當鼠標懸停在以「高」開頭的div時不會識別：

div [class*="high-"]:hover > div > p { opacity:1; }

[class*="high-"]:hover > div > p { opacity:1; }

來源

2014-10-02 Biomehanika

你試過了嗎？ div [class * =「high - 」]：hover p {opacity：1; } – giordanolima 2014-10-02 16:08:35

這兩個選擇器都是錯誤的 - 第一個選擇器在元素和屬性選擇器之間有空格（以便在div的_child_元素上查找具有該類的元素），第二個嘗試查找首先使用該類的元素下的div，這不在實際的元素結構中。 – CBroe 2014-10-02 16:09:45

現場演示在帖子上添加 – Biomehanika 2014-10-02 16:20:28

請勿在div和屬性選擇器[something]之間設置空格。此外，「高」號和p之間沒有中間分隔，因此請將其移除。這會是這樣，而是：

div[class*="high-"]:hover > p { 
    opacity:1; 
}

的白色空間，對CSS選擇意味着descendand，所以你正在尋找與屬性，一個div內的元素...

編輯

在提供的小提琴你有另一個問題，由於選擇器的特殊性。 Id選擇器優先於屬性選擇器，所以您的第一個p選擇器，因爲它受到id選擇器#highlights p {的優先級高於:hover之一。爲了解決這個問題，在懸停規則也使用id選擇：

Updated JsFiddle

#highlights div[class*="high-"]:hover > p { 

}

來源

2014-10-02 16:09:09 LcSalazar

謝謝，但這些更改不能解決問題..沒有任何反應。虐待讓一個jsFiddle嘗試重現問題 – Biomehanika 2014-10-02 16:12:53

@Biomehanika，使用SO的代碼片段...（Ctrl + M） – LcSalazar 2014-10-02 16:14:24

它已經完成：http://jsfiddle.net/pegspksp/ – Biomehanika 2014-10-02 16:14:38

CSS代碼不起作用，因爲p標籤不是另一個專區內。

使用：

[class*="high-"]:hover > p { 
    opacity:1; 
    background: #F00; 
}

的徘徊高*元素中只有p元素突出。

來源

2014-10-02 16:19:23 DocValerian

我不明白你爲什麼加入'：first-child'。 OP沒有要求它... – LcSalazar 2014-10-02 16:20:17

是真的，我似乎有紅色的東西不同，我的壞...糾正 – DocValerian 2014-10-02 16:24:51

懸停div的直接孩子的風格（只是CSS）

回答

相關問題