How can I apply an a:hover style to a text element

  • 17 July 2015
  • 6 replies
  • 168 views
M

Hi I would like to add a hover style to a nested element as the following:

wich one is the best way to target this selector in my custom css?

thank you.

6 replies

Noah
Userlevel 7

Hi Mattis,

I think you will have the most luck by first specifying the target text box ID, found in the right-hand properties pane under Element Metadata, and then specifying the target descendant. 

For example, if you are looking to target tags within your text box ‘#lp-pom-text-397’, it could be done like this:

#lp-pom-text-397 a:hover {color:blue;}

  #lp-pom-text-397 h6:hover {color:blue;}<br />

#lp-pom-text-397 p:hover {color:blue;}

Also, I’ve created a demo page where you can see the hover effect in action: http://unbouncepages.com/link-hover/

Joe

Hi Noah,

Might be interesting design aesthetic to have a slight shadow over an image and upon mouse hover, have the slight shadow go away to show natural image brightness. 

Appreciate the guidance!

Thanks,

Joe

Noah
Userlevel 7

Hey Joe,

You should be able to use the ‘Brightness’ Webkit filter for this. Here’s an example of how this would be used with an image element:

#lp-pom-image-56:hover {

 filter: brightness(15%);

 -webkit-filter: brightness(15%);}

For a nice transition, the following can be added:

#lp-pom-image-56 { 

 -webkit-transition: all 1s ease;

 -moz-transition: all 1s ease;

 -o-transition: all 1s ease;

 -ms-transition: all 1s ease;

 transition: all 1s ease; }

I’ve added some more examples of image hovers to the following page: http://unbouncepages.com/link-hover/

Update : added the filter property for Firefox support.

Joe

Hey Noah,

Hope you are having a good weekend!  Awesome support!  FYI I am only seeing the ‘opacity’ one working properly when I go to the page in Mozilla Firefox.  Could just be an issue with my browser.  Either way, top notch ability to make landing page elements unique.

Thanks,

Joe

Noah
Userlevel 7

Good catch Joe. Just added the ‘filter’ property which should take care of Firefox support!

O

Hey, I just attempted to use the grayscale hover code but it’s not working and the code is showing up at the top of my landing page when I save it. What gives?

Reply


Terms & ConditionsCookie settings