QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

HR Hover Issue

Started by Skhilled, Aug 09, 2021, 08:11 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skhilled

In the Admin, under the "Anti-Spam Verification" section, there's a HR rule on the middle of the first section.

You cannot view this attachment.

What I'm trying to do is change the color of the HR when hovering over it. I've already made the background change to black when hovering but the HR is the same color and will not be seen when hovering. I've tried a number of ways but am missing something.

EDIT: Now, I'm noticing a number of place like this in the admin. LOL

QuoteI'm trying to get it to work when hovering over the background of that entire area. So, no matter what area of that background I hover it should show a different color, white in this case.

CSS is declarative and straightforward, so if what you want is:
When hovering the area (.roundframe) change the style of the hr.

That translates to:
.roundframe:hover hr {
  // ...
}

PS: I'm only assuming .roundframe is the correct class, I don't really remember.

Bigguy

What css have you tried. :???
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Mostly, hr:hover and a few things like that but no joy. That will work if you hover directly over the hr only. But it won't also change the entire background as well.

Bigguy

Like this:

hr:hover {
  color: yellow;
}

Or did you use background-color
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

#4
yes, and used background.

EDIT: But not background-color.

Bigguy

Just "color" should work. background-color will make it look highlighted.

EDIT: Also, there could be a shadow on that hr, so if there is remove that as well.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Just as I thought... It only works when you directly hover over the HR only. I'm trying to get it to work when hovering over the background of that entire area. So, no matter what area of that background I hover it should show a different color, white in this case.

Bigguy

I thought you just wanted the HR. Ok, I will look again later today after work.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

SychO

QuoteI'm trying to get it to work when hovering over the background of that entire area. So, no matter what area of that background I hover it should show a different color, white in this case.

CSS is declarative and straightforward, so if what you want is:
When hovering the area (.roundframe) change the style of the hr.

That translates to:
.roundframe:hover hr {
  // ...
}

PS: I'm only assuming .roundframe is the correct class, I don't really remember.

Skhilled

As always, your help is invaluable!!! This is what worked:

.windowbg:hover hr {
    background: #fff;
}

You cannot view this attachment.

But, I've also done the roundframes in the same fashion. ;)

You cannot view this attachment.

Skhilled

The theme still has just a couple of things to do but...

You cannot view this attachment.