1

我想表示嵌套集（http://en.wikipedia.org/wiki/File:NestedSetModel.svg）

具有以下html结构

<div class="circle">
    <div class="nodeText">Clothing</div>
    <span class="lft">1</span>
    <span class="rgt">22</span>
    <div class="circle" id="node2">
    <div class="nodeText">Men's</div>
    <span class="lft">2</span>
    <span class="rgt">9</span>
    </div>
    <div class="circle" id="node3" >
        <div class="nodeText" >Women's</div>
    <span class="lft">10</span>
    <span class="rgt">21</span>
    </div>
</div>

和CSS（至少我认为对这个问题很重要）

.circle {
background-color: blue;
    margin:10px;
    padding: 10px;
    border-radius: 10%;
    position: relative;
    text-align: center;
    float: left;
    z-index: inherit;
}

.circle:HOVER{
background-color: red;
}

我想要的行为是，当我将鼠标悬停在具有“圆圈”类的 div 上（在本例中为“男士”或“女士”）时，我会更改这些的背景颜色，但不会更改父 div '服装'

4

2 回答 2

0

我改变

.circlr:hover

至

.circlr .circle:hover

这是一个例子：http: //jsfiddle.net/sechou/9eNuN/

于 2013-01-08T05:41:03.777 回答
0

请参阅此链接FIDDLE

我有一个内部类名的扩展名.circle

父类名称将是class="circle"，而男性或女性的内部类名称将是class="circle color"

通过代码正确理解它。

也许类选择器最强大的方面是可以将多个类应用于一个 HTML 元素。例如，您可能希望对一个特定元素使用两条规则，如下所示：

<p class="big indent">

.big { font-weight: bold; }
.indent { padding-left: 2em;}
于 2013-01-08T07:34:26.667 回答