Change CSS of a div when hovering another (JQuery)

Question

I want to change the CSS of a div when hovering its parent div.

This is my HTML:

<div id="box1" class="hover-on-div-1">
    <img src="images/1.png" alt="" />
    <div id="line1"></div>
    <div class="text_align"><span>Text here</span>
    </div>
</div>

Here is the CSS:

#box1 {
    height: 295px;
    width: 220px;
    background-color: #86d1f4;
    float: left;
    margin-left: 30px;
    margin-right: 120px;
    margin-top: 55px;
    color: #0081C5;
}

#box1:hover {
    background-color: #494c5b;
    color: #BFB6AF;
}

#line1 {
    height:1px;
    background:#0081C5;
    width:126px;
    margin-top:67px;
    margin-left:40px;
    position:absolute;
}

Note: .hover-on-div-1 is the class I use for a JQuery function that changes the image, the <span> is used only for a text-transform and the text-align class is pretty self explanatory.

How do I change the .line1 div when hovering over #box1?

I managed to change everything inside the #box1 div when I hover but not the .line1. Did some search on SO but since I'm a total noob when it comes to JQuery/JavaScript it didn't helped too much.

https://jsfiddle.net/nLg8Lr7x/

can you create a jsfiddle example?

Aram Mkrtchyan
– Aram Mkrtchyan

2015-04-02 09:50:14 +00:00
Commented Apr 2, 2015 at 9:50 — Aram Mkrtchyan
– Aram Mkrtchyan, Commented Apr 2, 2015 at 9:50
add code you have tried

Nishit Maheta
– Nishit Maheta

2015-04-02 09:50:25 +00:00
Commented Apr 2, 2015 at 9:50 — Nishit Maheta
– Nishit Maheta, Commented Apr 2, 2015 at 9:50

rtf_leg · Accepted Answer · 2015-04-02 09:58:03Z

5

You don't need JS for this - your #line1 div is child of #box1 div. Just add some css like this:

#box1:hover #line1 {
    /* Changes for #line1 when #box1 hovered */
}

Here is examle on jsbin.

edited Apr 2, 2015 at 9:58

answered Apr 2, 2015 at 9:52

rtf_leg

1,8191 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matei Panchios Over a year ago

You sir are a genius! Thank you! Will accept answer in a couple of minutes.

adricadar · Accepted Answer · 2015-04-02 10:03:23Z

1

If you want to do it with jQuery you can make use of mouseover and mouseleave functions to change css like below.

Notes: I suggest you to make use of addClass and removeClass functions instead of setting hard codded css in functions.

$('#box1').mouseover(function() {
   $('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
   $('#line1').css("background", "#0081C5"); // change back css as it was
});

$('#box1').mouseover(function() {
  $('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
  $('#line1').css("background", "#0081C5");
});

    #box1 {

      height: 295px;

      width: 220px;

      background-color: #86d1f4;

      float: left;

      margin-left: 30px;

      margin-right: 120px;

      margin-top: 55px;

      color: #0081C5;

    }

    #box1:hover {

      background-color: #494c5b;

      color: #BFB6AF;

    }

    #line1 {

      height: 1px;

      background: #0081C5;

      width: 126px;

      margin-top: 67px;

      margin-left: 40px;

      position: absolute;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
  <img src="images/1.png" alt="" />
  <div id="line1"></div>
  <div class="text_align"><span>Text here</span>
  </div>
</div>

edited Apr 2, 2015 at 10:03

answered Apr 2, 2015 at 9:55

adricadar

10.2k5 gold badges35 silver badges47 bronze badges

1 Comment

Matei Panchios Over a year ago

Thank you very much for your solution, it's nice to see the solution to my question done through JQuery.

Collectives™ on Stack Overflow

Change CSS of a div when hovering another (JQuery)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related