如何在悬停时更改其他元素的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;
}

Answer 2

首先将HTML部分更改为：

<div class="thermo">
  <div class="thermalcapsule" style="width: 20%">
    <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 class="startthermo">&nbsp;</div>
</div>

然后，使用此选择器更改圈子的background-color：

.thermalcapsule:first-of-type:hover ~ .startthermo {
  background-color: #000000;
}

有什么好处？

在这种情况下，如果.thermalcapsule元素是动态呈现的，则不必检查当前的胶囊是否是第一个。

在此示例中，我删除了.thermopadding元素并使用以下样式来应用效果：

.thermalcapsule:first-of-type {
  /* instead of using .thermopadding */
  margin-left: 2%;
}

<强> JSBin Demo

Answer 3

.thermalcapsule:hover .thermal1 {
  background-color: #000000; //remove this line
  background-color: #60A4CE; add below one
}

Answer 4

我不知道纯css的答案，但是你可以用JavaScript来实现它：

jsFiddle

围绕这两个元素创建一个包装元素，您要一起突出显示它们并使用其mouseenter和mouseleave事件来更改内部元素的类。

JavaScript的：

$(function () {

            $(".wrapper").mouseenter(function () {

                var $this = $(this);
                $("div", $this).addClass("highlighted");

            });

            $(".wrapper").mouseleave(function () {

                var $this = $(this);
                $("div", $this).removeClass("highlighted");

            });

});

HTML：

    <div class="wrapper">

        <div class="div1"></div>
        <div class="div2"></div>

    </div>

CSS：

.div1 {
    background-color:red;
    min-height:50px;
    min-width:100px;
}

.div2 {
    background-color:blue;
    min-height:50px;
    min-width:100px;
}

.highlighted {

    background-color:green;

}