97

I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
  display: none;
}
<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
    Bye
  </div>
  <div class="right1">
    Bye1
  </div>
</div>
<div class="right">
  Hello2
</div>

When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.

7 Answers 7

111

You can use style property for this. For example, if you want to change border -

document.elm.style.border = "3px solid #FF0000";

similarly for color -

 document.getElementById("p2").style.color="blue";

Best thing is you define a class and do this -

document.getElementById("p2").className = "classname";

(Cross Browser artifacts must be considered accordingly).

1
  • 1
    For updating or adding a new class - document.getElementById("p2").className = "classname"; is not the current way to do it. See this answer here - stackoverflow.com/questions/195951/…
    – Dan W.
    Aug 25, 2022 at 14:26
29
// select element from DOM using *const*
const sample = document.getElementById("myid"); // using const
// or you can use *var*
var sample = document.getElementById("myid"); // using var

// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; // Replaces all style properties. NOT RECOMENDED
0
7

Use document.getElementsByClassName('className').style = your_style.

var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";

Use single quotes for JS strings contained within an html attribute's double quotes

Example

<div class="somelclass"></div>

then document.getElementsByClassName('someclass').style = "NewclassName";

<div class='someclass'></div>

then document.getElementsByClassName("someclass").style = "NewclassName";

This is personal experience.

6
  • 11
    There is no such thing as getElementByClassName. Mar 6, 2013 at 8:04
  • 6
    The point is you forgot an s between Element and Class... It should be getElementsByClassName. Mar 6, 2013 at 8:06
  • 2
    I'm pretty sure single quotes versus double quotes will make no difference in this situation (the browser will interpret them the same; try right-clicking on an element with single quotes and going to "Inspect Element" in Firefox. You'll find it has double quotes). The distinction is only worthwhile when you need to nest them, e.g. document.querySelector('input[type="checkbox"]')
    – Adam Katz
    Jun 6, 2016 at 18:14
  • 5
    This is still incorrect, getElementsByClassName returns a list of elements, not a single element. You'd have to iterate over it and apply changes to each of them. Aug 31, 2020 at 23:22
6

Consider the following example: If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.

document.getElementById("ele_id").style.color="blue";

But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};

See below:

const ele=document.getElementById("ele_id");
const custom_style={
    display: "block",
    color: "red"
}

//Object.assign():
Object.assign(ele.style,custum_style);

Spread operator works similarly, just the syntax is a little different.

0

Just for the info, this can be done with CSS only with just minor HTML and CSS changes

HTML:

<div class="left">
    Hello
</div>
<div class="right">
    Hello2
</div>
<div class="center">
       <div class="left1">
           Bye
    </div>
       <div class="right1">
           Bye1
    </div>    
</div>

CSS:

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}
.right{
     float :right;
}
.center{
    float:left;
    height:60px;
    width:160px
}

.center .left1, .center .right1{
    margin:10px;
    float:left;
    border:1px solid green;
    height:60px;
    width:58px;
    display:none;
}
.left:hover ~ .center .left1 {
    display:block;
}

.right:hover ~ .center .right1 {
    display:block;
}

and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/

-5

This is really easy using jQuery.

For instance:

$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});

I've update your fiddle: http://jsfiddle.net/TqDe9/2/

1
  • 1
    This just shows or hides the element, and does not change any css. Aug 8, 2021 at 20:47
-6

You can do so using jQuery like this.

$('.left, .right').on('mouseenter', function(e) {
    if ($(this).attr('class') == 'left1') {
        $('.left1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    } else if ($(this).attr('class') == 'left1') {
        $('.right1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    }
})

or you can use it like this

for first requirement

$('.left').on('mouseenter', function(e) {
    $('.left1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})

for second requirement

$('.right').on('mouseenter', function(e) {
    $('.right1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.