使用 JavaScript 更改多个内联样式 OnMouse Over、OnMouse Out、Enter Key Change

发布于 2024-12-02 00:18:37 字数 1204 浏览 2 评论 0原文

有人可以帮我指出使用 javascript 更改多个内联样式的方向，例如：OnMouseOver、OnMouseOut，然后更改 Enter 键吗？

我有 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" />

原文

Can someone help point me in the direction of changing multiple inline styles using javascript suchas: OnMouseOver, OnMouseOut, and then a enter key change?

I have 2 onclick mouse over / out things that need to happen and then an after Enter key pushed state that needs to change the graphic out to a loading graphic?

Before Mouse Over State:

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

Mouse Over State - Change right to left:

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

Once clicked to begin search - change the image to this and remove [style details]:

src="images/loading2.gif"

Here is what I tried so far for just the OnMouseOver/Out part.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一绘本一梦想 2024-12-09 00:18:37

您可以使用 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");

在搜索时完毕

You can use jQuery. Here's a detailed list of events you can use:
http://api.jquery.com/category/events/

The idea would be:

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

On the other hand, I wouldn't use javascript to do this, I'd do it from css like so:

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

and change that piece of jQuery to just catch the click, do the search AJAX call, and then

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

and probably

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

when the search is done

回复收藏 0 原文

~没有更多了~

关于作者

我们的影子

暂无简介

0 文章

0 评论

24 人气

关注发私信

胡图图

文章 0 评论 0

关注

zt006

文章 0 评论 0

关注

z祗昰~

文章 0 评论 0

关注

冰葑

文章 0 评论 0

关注

野の

文章 0 评论 0

关注

天空

文章 0 评论 0

友情链接

文江博客

使用 JavaScript 更改多个内联样式 OnMouse Over、OnMouse Out、Enter Key Change

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

使用 JavaScript 更改多个内联样式 OnMouse Over、OnMouse Out、Enter Key Change

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。