Question

有人可以帮我指点使用javascript更改多个内联样式的方向：OnMouseOver，OnMouseOut，然后输入键更改？

我有2个onclick鼠标过度/完全需要发生的事情，然后是一个Enter键按下状态，需要将图形更改为加载图形？

鼠标悬停之前：

src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent"

鼠标悬停状态 - 从右向左变化：

src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent"

点击开始搜索后 - 将图片更改为此图片并删除[样式详细信息]：

src="images/loading2.gif"

这是我到目前为止仅针对OnMouseOver / Out部分所尝试的内容。

<img id="nb_search_magglass" alt="Search" border="0"
onmouseover="document.getElementById('nb_search_magglass').style.background: url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent;"

onmouseout="document.getElementById('nb_search_magglass').style=.background: url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent;"

style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" />

Answer 1

您可以使用jQuery。以下是您可以使用的事件的详细列表： http://api.jquery.com/category/events/

这个想法将是：

<html>
<head>
  <script>
  jQuery(document).ready(function() {
      $("img.wanna-change").mouseover(function() {
         // this this here is the <img> object. Here I make it into a
         //   jQuery object but you can put any javascript code here
         $(this).attr("style", "background:url() no-repeat scroll; width: 20px;")
      });
  </script>
</head>
<body>
  <img class="wanna-change" src="something" />
  <img class="wanna-change" src="something-else" />
</body>
</html>

另一方面，我不会使用javascript来执行此操作，我会从css这样做：

img {
    your-normal-style;
}
img:hover {
    your-hover-style;
}
img.searching {
    your-searching-style;
}

并更改该jQuery以捕获单击，执行搜索AJAX调用，然后

$(this).addClass("searching");

可能

$(this).removeClass("searching");

搜索完成时

使用Javascript OnMouseOver，OnMouseOut，Enter Key Change更改多个内联样式

1 个答案: