悬停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）

回答

相关问题