How do I change the css of a different element on hover?

Question

I am creating a thermometer graphic that looks like this:

and highlights a section of the thermometer on hover. The problem is that the first segment is created from two overlapping divs. This means that when I hover over the first segment, this happens:

How can I edit my css to highlight the first segment AND the circle at the start of the thermometer whenever the user hovers over either? I would prefer a css-based solution, but if that isn't possible, I am happy to use javascript/jquery instead. Current HTML and CSS below.

<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

First change the HTML part to:

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

Then, use this selector to change background-color of the circle:

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

What is the benefit?

In this case, If .thermalcapsule elements are rendered dynamically, you don't have to check whether the current capsule is the first one or not.

In this example I removed the .thermopadding element and used following style to apply the effect:

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

JSBin Demo

Answer 2

I don't know the pure css answer, but here's how you can do it with JavaScript:

jsFiddle

You create a wrapper element around those 2 elements, that you want to highlight together and use its mouseenter and mouseleave events to change class of the inner elements.

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;

}

Answer 3

I solved this problem like this, i hope it helps:

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 4

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