Last item with hover

Question

There are five divs, and by default they have some kind of hover, you need to make sure that the last one from which we took the mouse has a hover; script is something like

<html> <head> <script type = "text/javascript"> $(document).ready( function(){ $(".leftBlock").hover(function(){ $("#image").attr("src",$(this).attr("image_src"))}, function(){$("#image").attr("src","default_image_url");} }); </script> </head> <body> <div class="leftBlock" image_src="image1.jpg"> Left Block 1 </div> <div class="leftBlock" image_src="image2.jpg"> Left Block 2 </div> <div class="leftBlock" image_src="image3.jpg"> Left Block 3 </div> <div class="leftBlock" image_src="image4.jpg"> Left Block 4 </div> <div class="leftBlock" image_src="image5.jpg"> Left Block 5 </div> <div id="image_div" ><img id="image" src="default.jpg"/></div> </body> </html>

I would be grateful for the help with jQuery, but I'm with you)

Accepted Answer · 2012-05-25T08:36:26

Using .hover () is not justified in your case. It is better to use it when you need the opposite effect when you move the cursor from the element. Use mouseenter () or mouseover (). Try on

HTML

 <div id="some_list"> <a href="">Point 1</a> <a href="">Point 2</a> <a href="">Point 3</a> </div>

jQuery

 var listPoint = $("#some_list a"); listPoint.mouseenter(function(){ listPoint.css({ fontWeight: 'normal', color: '#000' }) $(this).css({ fontWeight: 'bold', color: '#060' }); });

In your case - enough:

 $(".leftBlock").mouseenter(function(){ $("#image").attr("src",$(this).attr("image_src")); });

Until the cursor is hovering over the next #leftBlock element, the picture will remain unchanged.

in my case this way: five blocks to the left, and a block with pictures on the right, and when you hover on the corresponding block, the corresponding picture is displayed and when you take the mouse away from the last (not the fifth one but the last one on which the mouse was) the style should remain (CSS prescribed to it).
Try this: $ (". LeftBlock"). Hover (function () {$ (". LeftBlock"). Css ('background-image', 'none'); $ (this) .css ('background', ' url ("/ img / arrow4.png") 0 0 no-repeat '); // or the full path to the picture test.atameken-kz.com/img/arrow4.png $ ("# image"). attr (" src ", $ (this) .attr (" image_src "))}, function () {$ (" # image "). attr (" src ")});
PS @gold, accept the answer from @Rules in the end, he really needs)))
You have a piece of code on the page: $ (". LeftBlock"). Hover (function () {$ ("# image"). Attr ("src", $ (this) .attr ("image_src"))}}, function () {$ ("# image"). attr ("src")});

Answer 2 · 2012-05-25T09:52:59

Long thought and solved your problem !:

 <html> <head> <title>brg</title> </head> <body> <div class="divobj" style="left: 0px;" id="1">A</div> <div class="divobj" style="left: 30px;" id="2">B</div> <div class="divobj" style="left: 60px;" id="3">C</div> <style> .divobj{ position: absolute; background-color: #FF0000; width: 30px; height: 30px; top: 0px; } </style> <script> window.onload=function(){ var lastSelectedId=0; var divObjs=document.getElementsByClassName("divobj"); for(var i=0;i<divObjs.length;i++){ divObj=divObjs[i]; divObj.onmouseover=function(evt){ divObj=window.event?event.srcElement:evt.target; if(divObj.id!=lastSelectedId){ lastSelectedId=divObj.id; divObj.style.backgroundColor="#00FF00"; for(var i=0;i<divObjs.length;i++){ if(divObjs[i].id!=lastSelectedId){ divObjs[i].style.backgroundColor=""; } } } } } } </script> </body> </html>

UPD Solution without id (may not work in very ancient browsers):

 <html> <head> <title>brg</title> </head> <body> <div class="divobj" style="left: 0px;">A</div> <div class="divobj" style="left: 30px;">B</div> <div class="divobj" style="left: 60px;">C</div> <style> .divobj{ position: absolute; background-color: #FF0000; width: 30px; height: 30px; top: 0px; } </style> <script> window.onload=function(){ var lastSelectedObj=0; var divObjs=document.getElementsByClassName("divobj"); for(var i=0;i<divObjs.length;i++){ divObj=divObjs[i]; divObj.onmouseover=function(evt){ divObj=window.event?event.srcElement:evt.target; if(divObj!=lastSelectedObj){ lastSelectedObj=divObj; divObj.style.backgroundColor="#00FF00"; for(var i=0;i<divObjs.length;i++){ if(divObjs[i]!=lastSelectedObj){ divObjs[i].style.backgroundColor=""; } } } } } } </script> </body> </html>

Only it is necessary for each element to assign its id so that everything works ...
I would love to accept what you did, but I still have a block with pictures, and it’s not appropriate to assign each id there.
Hmm, I need to think something else can come up with something without id ... Thank you @gold for coming up with a JS task for me :)

Last item with hover

2 answers 2

More articles: