Button hover not working

[m-gleeson]

Having a hard time doing something seemingly very simple.... can't seem to get button hover styles working at all. Works fine with other elements, but not this. Best I can do is get the background table to adopt the bg color i'd like, but not the button proper.

Code goes like this:

`

.hover:hover > * { background-color: blue!important; } Don't click me!

`

and then looks like this on hover:

any ideas?

[iRyusa]

You have to be a bit more specific about your css selector here : https://mjml.io/try-it-live/Hk_5ldOVr .hover:hover > * is not enough

[m-gleeson]

Thanks!

[dylanmrowe]

@iRyusa In the example you posted the button highlights when your mouse is anywhere on the row.

I've tried multiple ways to make it only highlight when on the button, but can't get it to work.

Any insight?

[iRyusa]

https://mjml.io/try-it-live/Hk_5ldOVr You only need to tweak the css selector.

[dylanmrowe]

This selector fixed it for me:

<mj-style> .hover p:hover { background-color: blue !important; } </mj-style>

Note that when I add a link to the button the \

tag changes to an \ tag.

<mj-button css-class="hover-blue" border-top="1px solid #000000" background-color="whitesmoke" color="black" mj-class="btn-10" align="center" href="https://www.apple.com"> Click Me! </mj-button>

if you have href attr in the button you can do hover by targeting "a"

.hover-blue:hover a {
        background-color: blue !important;
      }