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;
}

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 演示

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;

}