jquery - 如何在悬停时更改不同元素的 css？

Question

我正在创建一个看起来像这样的温度计图形:

并在悬停时突出显示温度计的一部分。问题是第一个片段是由两个重叠的 div 创建的。这意味着当我将鼠标悬停在第一段上时，会发生这种情况:

当用户将鼠标悬停在其中时，如何编辑我的 CSS 以突出显示第一段和温度计开头的圆圈？我更喜欢基于 css 的解决方案，但如果那不可能，我很乐意改用 javascript/jquery。下面是当前的 HTML 和 CSS。

<div class="thermo">
    <div class="startthermo">&nbsp;</div>
    <div class="thermopadding">&nbsp;</div>
    <div class="thermalcapsule" style="width: 10%">
        <div class="thermal thermal1">1</div>
        100
    </div>
    <div class="thermalcapsule" style="width: 15%">
        <div class="thermal thermal2">2</div>
        200
    </div>
    <!-- More HTML here -->
</div>

.thermo {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.thermalcapsule {
    margin-right: 1px;
    margin-top: 20px;
    float:left;
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.thermalcapsule:hover .thermal1{
    background-color: #000000;
}

.thermoimage {
    margin-left: -15px;
    margin-top: 8px;
    float: left;
}

.thermopadding {
    width: 2%;
    float:left;
}

.startthermo {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #60A4CE;
    border: 9px solid #f4f4f4;
    display: block;
    float:left;
    position: absolute;
}

.thermal {
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: relative;
    z-index : 5;
}

.thermal1 {
    background-color: #60A4CE;
}

.thermal2 {
    background-color: #437C87;
}

Answer 1

我是这样解决这个问题的，希望对你有帮助:

http://jsfiddle.net/bVDVm/

<div class="thermo">
    <div class="thermopadding">&nbsp;</div>
    <div class="thermalcapsule" style="width: 15%">
        <div class="startthermo">&nbsp;</div>
        <div class="thermal thermal1">1</div>
        100
    </div>
    <div class="thermalcapsule" style="width: 15%">
        <div class="thermal thermal2">2</div>
        200
    </div>
    <!-- More HTML here -->
</div>

.thermalcapsule:hover .startthermo,
.thermalcapsule:hover .thermal1{
    background-color: #000000;
}

.startthermo {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #60A4CE;
    border: 9px solid #f4f4f4;
    display: block;
    float:left;
    position: absolute;
    margin-left: -35px;
    margin-top: -20px;
}