Rich-text Reply

How can I preserve the background color change for <div> in hover state?

ThomasTheTank 10-22-14
Accepted Solution

How can I preserve the background color change for <div> in hover state?

I am running into a roadblock trying to test out different CTA colors.

 

My original button <div> has a background change when the mouse hovers over it. I want that to stay the same while the standard background color changes.

 

I have successfully made different variations of the button color, but on each of the variations it removes the background on hover feature.

 

What I have tried:

 

Went to interactive mode, hovered over the button to change the background, hit CTRL + I to return. This does not preserve the hover state to make edits. That was from this guide - https://help.optimizely.com/hc/en-us/articles/200039725)

 

I tried updating the code myself, but I don't know javascript so I tried a couple variations:

 

$(".example:hover").css({"background-color":"#f00"});

$("div.example:hover").css({"background-color":"#f00"});

 

I'm sure this is pretty easy, but this is my first time using Optimizely. Thank you in advance.

MartijnSch 10-22-14
 

Re: How can I preserve the background color change for <div> in hover state?

The code variations that you wrote seem to be OK so the problem is not in writing the code itself. Problem is that I still don't completely get what you're trying to achieve in this test. You want the background color of the button to change but keep the background color of the complete page to be still the same?

Re: How can I preserve the background color change for <div> in hover state?

Hello - 

 

I have a clickable button that is orange. When a user hovers their mouse over the botton, it changes to dark grey. 

 

CSS:

 

.example {background-color: #FFA500;}

 

div.example:hover {background-color: #808080;}

 

 

I want to change the resting background color from orange to other variants, while keeping the hover background as-is.

 

The problem is whenever I try and change the background in the optimizely editor, it does away with the hover color all together. I followed the guide listed in the my OP about using interactive mode, but it doesn't work.

greg 10-22-14
 

Re: How can I preserve the background color change for <div> in hover state?

The problem is with your selectors.

The :hover pseudo-selector does not work in jQuery. To change (or revert) the hover state of an element, you should use this:

$(".example").hover(function() {
$(this).css("background-color","#808080")
});
Level 2

Re: How can I preserve the background color change for <div> in hover state?

Hi Greg,

 

I have no experience coding with jQuery,  so I copy+pasted your example and subsited .example with the actual div name. When accepting, I get the following error on the line that start with $(this)

 

Missing Semicolon

 

 

greg 10-22-14
 

Re: How can I preserve the background color change for <div> in hover state?

Sorry, there should be a semicolon at the end of that line. Like so:

$(".example").hover(function() {
$(this).css("background-color","#808080");
});
Level 2

Re: How can I preserve the background color change for <div> in hover state?

Nailed it. Thank you!

greg 12-03-14
 

Re: How can I preserve the background color change for <div> in hover state?

For anyone reading this who wants to change an element's style on hover, and revert it back to normal after hover, the code is like this:

 

$("#example").hover(function() {
  $(this).css("background-color","#fff");
}, function() {
  $(this).css("background-color","none");
});

 The difference is there is a second function() that specifies what happens when the user moves their mouse *off* the element. Without it, the element will change on hover and remain that way, forever and ever...

Level 2
MattG 04-14-15
 

Re: How can I preserve the background color change for <div> in hover state?

Thanks Greg - if I also wanted to update and then revert the border color of the button on hover, how would I include that?

Level 1
greg 04-14-15
 

Re: How can I preserve the background color change for <div> in hover state?

[ Edited ]

Matt, to set multiple CSS values you can pass an object in the css() function, like so:

 

$("#example").hover(function() {
  $(this).css({"background-color":"#fff","border-color":"#ddd"});
}, function() {
  $(this).css({"background-color":"none","border-color":"#fff"});
});

 

Level 2
MattG 04-14-15
 

Re: How can I preserve the background color change for <div> in hover state?

Got it, simple enough. Thanks Greg.
Level 1
MikeP 06-24-15
 

Re: How can I preserve the background color change for <div> in hover state?

Thanks, Greg. Super helpful. You saved me at least an hour today.
Level 2
sachfm 08-25-15
 

Re: How can I preserve the background color change for <div> in hover state?

Hi Greg,

 

I've implemented your code but still see the issue where my background color stays changed foreverETR_ctabutton_code.jpg

 

I've also tried changing "none" to another color , "#9cc84b", but I had the same problem.

Does anything look wrong here?

Level 1