Question

我在下拉菜单系统中使用它。鼠标悬停在链接上时，父div的图像被切换，鼠标移出后，它会恢复图像。我在html中使用的这个变量。有没有办法可以将这个变量放在我的css表中并通过id或类调用？

在<li>标记中，您可以看到鼠标悬停和鼠标输出，我想给一个类ot id来调用此变量。

这是我的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>

Answer 1

有没有办法可以将这个变量放在我的css表中并调用通过身份证或班级？

没有afaik。你可以做的是修改元素的类并在CSS中定义它们。在这种情况下，你应该使用:hover pseudo-class而不是JS技巧。

Answer 2

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

考虑了不引人注目的javascript，link 1 link 2

Answer 3

以下是使用下拉菜单创建菜单的简单方法。试试这个。

像这样的HTML。

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

这样的风格。

.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;
}

如何将javascript变量放入css中

3 个答案: