Forums

Mouseenter/Mouseleave vs Mouseover/mouseout

Permalink
Hi. I am having some difficulty with adding mouse effects to my concrete5 website. For some time I have used mouseover/mouseout on my html/css websites to have a button change color on hover, but recently noticed that the mouseout always breaks on chrome mobile browser. The code I typically use is:

<a href="http://www.mywebsite.com"><img src="/image.jpg" alt="image name" onmouseover="this.src='/image2.jpg';" onmouseout="this.src='/image.jpg';" >


So I have started to use the mouseenter and mouseleave commands instead.

<a href="http://www.mywebsite.com"><img src="/image.jpg" alt="image name" onmouseenter="this.src='/image2.jpg';" onmouseleave="this.src='/image.jpg';" >


This works fine on chrome desktop and mobile, aswell as internet explorer (haven't checked firefox).

However, I can't get it to work with concrete5. The first code (Mouseover and mouseout) work fine when I add the code to a content html block, but when I use the second code (with mouseenter and mouseleave) concrete5 somehow edits the code to delete the commands, which means I'm only left with a clickable image.

Does anyone know why this is or what, if anything, I am doing wrong? I would love to resolve this as I use custom buttons on almost all my websites. Thanks!
 
JohntheFish replied on at Permalink Reply
JohntheFish
If all you need is a button color or style change, you can do it with css and no JavaScript needed.

Something along the lines of:

.my_button{
  background:red;
}
.my_button:hover{
  background:green;
}


If you really need to do it in JavaScript, you can attach the event handlers in jQuery and jQuery will take care of browser differences for you.
webdeshis replied on at Permalink Reply
Thanks for replying :) While I have been doing websites for a long time, I'm relatively new to css so am not sure how to go about it. Would I have to edit a css file aswell as add the code to the content block? If so, which css file?

I'm also not familiar with JQuery. How would I attach the event handler?
JohntheFish replied on at Permalink Reply
JohntheFish
You only need the CSS once.

At its simplest, you could put CSS inside <style> tags in an html block above where your button is.

You can also add it to your theme under theme customisation in the dashboard, add it in a view.css file for a custom block containing your button, hard code it into a theme or use my Style Quickie block.