If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

The image is basically a light. When hovered, the light should turn on, so it should do an image swap for the light_on.png image. When you move away, the light turns off again. This is simple enough. However, when the light is clicked, I want it to stay on until it is clicked off again. So the hover shouldnt work when the light has been clicked on, only when the light is off. I have the following code

The hover is working fine, but when you click on a light, it wont stay on because its being affected by the hover event. How can I make these two events work alongside each other in the way that I have described?

Users who have thanked glenngv for this post:

Thats fantastic, looking at the answer I think I should have figured that one out for myself.

One more quick question. Say I have more than one light, and they all have data-role="light". The above would work for all of them, however, if one of the lights is turned on all other lights would become inactive. Is there any way to only make the clicked light inactive, without removal the data-role? I was thinking about maybe getting the id of the clicked light and then appending that to something, but I dont think this would be the best approach.

Users who have thanked glenngv for this post:

Kool, I would presume that means adding the following to each of my lights?

Code:

data-clicked="false"

The click doesnt seem to function properly when I do this, but something strange does happen. If I alert the clicked variable right after it has been assigned, the click does work properly. Not to sure why an alert would cause this to work, obviously I cant keep it there, just find it strange.

You don't have to add the data-click attribute but it shouldn't hurt either when added. If there is no such attribute, doing $this.data('clicked') will return undefined and it should still satisfy the if (!clicked) condition.