Is there a way to modify the CSS of another element when hovering over it?

Question

Is there a way to modify the CSS of another element when hovering over it?

I am working on a thermometer design that features multiple segments and a circle at the start. When hovering over each segment, I want it to highlight along with the circle. Currently, the issue is that the first segment is created using two overlapping divs, resulting in an unintended effect when hovered over.

Is there a way to modify the CSS code to ensure that both the first segment and the circle light up simultaneously when either one is hovered over? Ideally, I would like a solution within CSS, but I am open to using JavaScript or jQuery if necessary. Below is the current HTML and 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;
}

jquery css hover

Answer 1

Answer №1

Here is my solution to the problem, I hope it can be helpful:

Link to the code

<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>
    <!-- Additional HTML content -->
</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

Here is my solution to the problem, I hope it can be helpful:

Link to the code

<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>
    <!-- Additional HTML content -->
</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 3

Answer №2

To begin, modify the HTML segment as follows:

<div class="temp">
  <div class="temperaturecapsule" style="width: 20%">
    <div class="temperature temp1">1</div>
    100
  </div>
  <div class="temperaturecapsule" style="width: 15%">
    <div class="temperature temp2">2</div>
    200
  </div>
  <!-- Additional HTML code here -->

  <div class="starttemp">&nbsp;</div>
</div>

Then, implement this selector to alter the background-color of the circle:

.temperaturecapsule:first-of-type:hover ~ .starttemp {
  background-color: #000000;
}

What advantage does this provide?

In this scenario, if the .temperaturecapsule elements are dynamically generated, there is no need to validate whether the current capsule is the first one or not.

In this instance, the .temppadding element has been eliminated and the following style is utilized to apply the effect:

.temperaturecapsule:first-of-type {
  /* Instead of using .temppadding */
  margin-left: 2%;
}

JSBin Demo

Answer 4

To begin, modify the HTML segment as follows:

<div class="temp">
  <div class="temperaturecapsule" style="width: 20%">
    <div class="temperature temp1">1</div>
    100
  </div>
  <div class="temperaturecapsule" style="width: 15%">
    <div class="temperature temp2">2</div>
    200
  </div>
  <!-- Additional HTML code here -->

  <div class="starttemp">&nbsp;</div>
</div>

Then, implement this selector to alter the background-color of the circle:

.temperaturecapsule:first-of-type:hover ~ .starttemp {
  background-color: #000000;
}

What advantage does this provide?

In this scenario, if the .temperaturecapsule elements are dynamically generated, there is no need to validate whether the current capsule is the first one or not.

In this instance, the .temppadding element has been eliminated and the following style is utilized to apply the effect:

.temperaturecapsule:first-of-type {
  /* Instead of using .temppadding */
  margin-left: 2%;
}

JSBin Demo

Answer 5

Answer №3

.thermalcapsule:hover .thermal1 {
  background-color: #FFFFFF; //delete this code
  background-color: #336699; insert the following line
}

Answer 6

.thermalcapsule:hover .thermal1 {
  background-color: #FFFFFF; //delete this code
  background-color: #336699; insert the following line
}

Answer 7

Answer №4

If you're looking for a way to achieve this using JavaScript instead of pure CSS, here's a solution:

Check out the JSFiddle example

The approach involves creating a wrapper element around the two elements you want to highlight together and utilizing the mouseenter and mouseleave events to toggle classes on the inner elements.

Here is the JavaScript code snippet:

$(function () {
    $(".wrapper").mouseenter(function () {
        var $this = $(this);
        $("div", $this).addClass("highlighted");
    });

    $(".wrapper").mouseleave(function () {
        var $this = $(this);
        $("div", $this).removeClass("highlighted");
    });
});

And here is the corresponding HTML structure:

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

For the CSS styling, you can use the following rules:

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

If you're looking for a way to achieve this using JavaScript instead of pure CSS, here's a solution:

Check out the JSFiddle example

The approach involves creating a wrapper element around the two elements you want to highlight together and utilizing the mouseenter and mouseleave events to toggle classes on the inner elements.

Here is the JavaScript code snippet:

$(function () {
    $(".wrapper").mouseenter(function () {
        var $this = $(this);
        $("div", $this).addClass("highlighted");
    });

    $(".wrapper").mouseleave(function () {
        var $this = $(this);
        $("div", $this).removeClass("highlighted");
    });
});

And here is the corresponding HTML structure:

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

For the CSS styling, you can use the following rules:

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

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

.highlighted {
    background-color: green;
}

Is there a way to modify the CSS of another element when hovering over it?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The complexity of JQuery's design has left many puzzled

Unable to retrieve the width of an `element` using Angular's built-in jQuery method

Showing ASP code within a DIV element (inline)

Searching for a name in JSON or array data using jQuery can be accomplished by utilizing various methods and functions available

Failure to send AJAX POST data

Hidden input value appearing blank even though it contains data

Error message "e.nodename undefined when set to setTimeout" was encountered

How can the table header be displayed in a Vue JS application after receiving the server response?

Is it possible to uncheck a checkbox from a list, even if some of them are already unchecked?

What's the reason for my badge being an oval shape?

Using jQuery to add a class of "trigger" to the loaded URL

The Javascript toggle for hiding and showing did not function as expected

When there is no content in the responseText, AJAX will display an error

The number of columns in the table do not match

Clear information upon clicking to switch to a new controller

Unable to submit form using the submit button

Error Loading Message Appears with jQuery Mobile 1.3.1 and Flot Integration

Activating radio button based on the value in a text field

Looking to position a JSX component to the left on your webpage with React and Bootstrap?

Inconsistency with jQuery Ajax response in Internet Explorer leading to null results