CSS Hover, text changing on mouseover

HTML & CSS
1

I need some help in preventing a block of text on my site, kenerly.com from changing when you mouse over it. It’s on the front page. The text in question is.

“This site is a 30 year work in progress of the Kennerly, Kenerly, Kennerley and Kenerley families. You must register and be approved for access. Thanks for visiting, Kedrick Kenerly”

I believe it’s a CSS issue that I’m overlooking.

Any help would be greatly appreciated.
Thanks, Ked

1 Like
2

Hi @kenerly. Welcome to these forums. :slight_smile:

There’s a rule in one of your CSS files (webtrees.min.css, line 1413) that looks like this:

.btn-link:hover,.nav-link:hover,a:hover {
    font-weight: 700;
}

That’s setting the link text to be bold on hover. I’m not sure whether it’s viable for you to change that, given that it affects various elements, so you may prefer to override it. It looks like you’re using a framework, though, so you have to be careful where you make the change. I don’t work with frameworks, so I can’t reliably advise, but if you have access to the HTML, you could perhaps add a special class and undo the bold. Still, it seems weird to have a site-wide rule that says a link should turn bold on hover.

3

You are 100% correct on the link:hover, however, I need to change the fact that the block of text is acting as if it’s a link when it’s just text that does not link to anything.

1 Like
4

Ah, right. So it’s really an HTML issue.

Do you have access to the HTML? Or is there an editor interface you’re using to build this? (I had a little look at the software you’re using.)

The paragraph is wrapped with a link, so obviously if you can remove that link, that would be the ideal:

<a class="btn btn-ked">
  <p align="left">
    This site is a 30 year work in progress 
    of the Kennerly, Kenerly, Kennerley and Kenerley families. 
    You must register and be approved for access. 
    Thanks for visiting, Kedrick Kenerly
  </p>
</a>
5

Yes, I can edit the html, here is a link to the phtml file. I had to zip it for the link to work. I also included the two CSS files that directly affect the phtml file.

https://kenerly.com/ked.zip

1 Like
6

Okay. Did you try editing the HTML? You just need to change this (in login-page.phtml):

<a class="btn btn-ked"><p align="left">This site is a 30 year work in progress of the Kennerly, Kenerly, Kennerley and Kenerley families. You must register and be approved for access. Thanks for visiting, Kedrick Kenerly</p>
</a>

to this:

<p align="left">This site is a 30 year work in progress of the Kennerly, Kenerly, Kennerley and Kenerley families. You must register and be approved for access. Thanks for visiting, Kedrick Kenerly</p>

That is, delete the <a class="btn btn-ked"> at the start and </a> at the end. :slight_smile:

1 Like
7

You are the MAN!!! That fixed it, Thanks

1 Like