jquery - Javascript onmouseover event working but need to reverse upon mouse "not over" - Stack Overflow

admin管理员组

文章数量:1026212

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

• javascript
• jquery
• html
• css
• onmouseover

Share Improve this question Follow edited Jun 29, 2015 at 18:16 ChadF 1,7581010 silver badges2222 bronze badges asked Jun 29, 2015 at 17:58 user8689user8689 2711 silver badge33 bronze badges 2

• I think you are looking for mouseOut (Jquery) api.jquery./mouseout Edit : I can't see your example – Core972 Commented Jun 29, 2015 at 17:59
• <code><img src="image1.png" width="300" height="115" onmouseover="this.src='image1.png';" onmouseout="image2.png"></code> – user8689 Commented Jun 29, 2015 at 18:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Just undo the change in the same way by setting the src:

<img src="image1.png" width="300" height="115" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';">

You could use jQuery and use the .hover function. This function performs both mouseenter and mouseleave functions for you so you only need to specify what should happen.

Also, you should specify your styling in a CSS file.

This solution does not supply you with an inline solution, but does reduce your code and separates your concerns.

This is your Javascript. I've used changing text in a div to show you an example rather than toggling an image, because I don't have an image handy, but it should be simple to use this as an example.

$("#hoverExample").hover(
  function () {
    $(this).text("Mouse has entered");
  },
  function () {
    $(this).text("Mouse has left");
  }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hoverExample">Hover over this div</div>

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

• javascript
• jquery
• html
• css
• onmouseover

Share Improve this question Follow edited Jun 29, 2015 at 18:16 ChadF 1,7581010 silver badges2222 bronze badges asked Jun 29, 2015 at 17:58 user8689user8689 2711 silver badge33 bronze badges 2

• I think you are looking for mouseOut (Jquery) api.jquery./mouseout Edit : I can't see your example – Core972 Commented Jun 29, 2015 at 17:59
• <code><img src="image1.png" width="300" height="115" onmouseover="this.src='image1.png';" onmouseout="image2.png"></code> – user8689 Commented Jun 29, 2015 at 18:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Just undo the change in the same way by setting the src:

<img src="image1.png" width="300" height="115" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';">

You could use jQuery and use the .hover function. This function performs both mouseenter and mouseleave functions for you so you only need to specify what should happen.

Also, you should specify your styling in a CSS file.

This solution does not supply you with an inline solution, but does reduce your code and separates your concerns.

This is your Javascript. I've used changing text in a div to show you an example rather than toggling an image, because I don't have an image handy, but it should be simple to use this as an example.

$("#hoverExample").hover(
  function () {
    $(this).text("Mouse has entered");
  },
  function () {
    $(this).text("Mouse has left");
  }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hoverExample">Hover over this div</div>

本文标签： jqueryJavascript onmouseover event working but need to reverse upon mouse quotnot overquotStack Overflow