How can I put a java script variable into css

Question

I am using it in a drop down menu system. on mouse hover on a link the image of a parent div got switched and on mouse out it reverts the image. this variable I am using in html. Is there a way I can put this variable in my css sheet and call through an id or class?

In <li> tag you can see the mouseover and mouseout, I want to give an class ot id to call this variable.

This is my html

<div onmouseover="changeImage(fashionSrc)" onmouseout="changeImage(fashionSrc1)">
    <h3>Casuals</h3>
</div>
<ul>
    <li onmouseover="changeImage(fashionSrc2)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 1</a></li>
    <li onmouseover="changeImage(fashionSrc3)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 2</a></li>
    <li onmouseover="changeImage(fashionSrc4)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 3</a></li>
    <li onmouseover="changeImage(fashionSrc5)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 4</a></li>
    <li onmouseover="changeImage(fashionSrc6)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 5</a></li>
    <li onmouseover="changeImage(fashionSrc7)" onmouseout="changeImage(fashionSrc1)"><a href="#">Menu 6</a></li>
</ul>

You'll have to be more clear in what it is you are looking to do, for we simply cannot understand what you are asking here. — DoctorLouie, Apr 12 '14 at 05:12

score 0 · Answer 1 · answered Apr 12 '14 at 05:12

Is there a way I can put this variable in my css sheet and call through an id or class?

No afaik. What you can do is modify the element's class and define those in your CSS. You should use the :hover pseudo-class instead of JS tricks in this case anyway.

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

onMouseOver = "this.src="../your_path/image1.png"; //or anything else
onMouseOut = "this.src="../your_path/image2.png"; //or anything else

Consider unobstrusive javascript, link 1 link 2

edited May 23 '17 at 12:13

Community

1
1

answered Apr 12 '14 at 05:51

4dgaurav

11,360
4
32
59

score 0 · Answer 3 · answered Apr 12 '14 at 06:29

Here is the simple way to create a menu with drop-down. try this.

HTML like this.

<div class="drop-down">
  <h2></h2>
  <ul>
    <li>Menu 1</li>
    ...
  </ul>
</div>

Style like this.

.drop-down {
  position:relative;
  height:40px;
}

.drop-down h2 {
  ... //Some style for heading
}

.drop-down ul{
  display:none;
  position:absolute;
  top:40px; // Equal to drop-down height;
  left:0;
}

//Display the submenu, when hover
.drop-down:hover ul {
  display:block;
}

How can I put a java script variable into css

3 Answers3