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> Hello
</div>
<div> <div> Bye </div> <div> Bye1 </div>
</div>
<div> Hello2
</div>

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

7 Answers

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

0

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

1

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

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

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

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

This is personal experience.

5

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.

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

HTML:

<div> Hello
</div>
<div> Hello2
</div>
<div> <div> Bye </div> <div> 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:

This is really easy using jQuery.

For instance:

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

I've update your fiddle:

1

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

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy