Link Hover Transformation

[panzerscope]

Hello,

So I have a CSS code that changes the colour of links when hovered over, however it is interfering with other link types on my site such as my pagination buttons are being interfered with. My code is as below

/* Start Link Hover Glow */
a:hover {
    text-decoration: none;
    color: #b40300;
    text-shadow: -1px 1px -1px #b40300, 1px -1px -1px #b40300;
    -webkit-transition: 400ms linear 0s;
    -moz-transition: 400ms linear 0s;
    -o-transition: 400ms linear 0s;
    transition: 400ms linear 0s;
    outline: 0 none;
}
/* End Link Hover Glow */

Is there a way to direct the CSS to specific links ?

Thanks,
P

[Wayne Luke]

Make your CSS more specific. Using your browser's developer tools to inspect the elements you want to change will allow you to find their parents and reduce the specificity of your custom CSS. For instance to apply it to only links within Post Content you can try something like:

.b-post__content a:hover {your code}

[panzerscope]

Cheers for that Wayne, getting the hang of this now.

One thing however, it seem that the transition colour I am trying to implement via my CSS ON my .forum-list-container seems to be getting ignored. The transition effect works but goes from a light blue to a darker blue as opposed to the colours I have referenced in my CSS. It works elsewhere just fine. As per the code below, I also tried the !important marker but seems to make no difference.

.forum-list-container a:hover {
    text-decoration: none; !important
    color: #b40300; !important
    text-shadow: -1px 1px -1px #b40300, 1px -1px -1px #b40300; !important
    -webkit-transition: 400ms linear 0s;
    -moz-transition: 400ms linear 0s;
    -o-transition: 400ms linear 0s;
    transition: 400ms linear 0s;
    outline: 0 none;
}

Any ideas ?

Cheers,
P

[Wayne Luke]

You seem to be missing an attribute on your transition property. You're not telling it how to transition. Did you copy this from somewhere? Did they have working examples on a site like CodePen?

[panzerscope]

That code is what I am currently using to fade my link colour from one colour to another, this is working on other attributed on my forum, just not the .forum-list-container (and a couple of others but once I figure this issue I can apply it elsewhere).

I cannot remember where I got the code, but it works...just not on certain elements which may be due to this missing transition property you speak of. What is missing exactly ? When I look at it, it looks like its all there.

Thanks,
P

[Wayne Luke]

Transition takes 4 parameters. You have three. I linked to the documentation above.

[panzerscope]

So I have looked at this again and now using the following code:

.forum-list-container a {
  color:#49a0cc; background:none;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.forum-list-container a:hover { color:#b40300; background:none; }

I am still getting the transition effect so far as the fading effect but the colours are still being ignored, again this code example is working fine on other elements such as .b-post-sm--compact (Search Module) but the links on my forum front page showing the channels etc which so far as I can see is .forum-list-container is not behaving.

The above CSS is applied and can be seen on https://extremehw.net/

[Wayne Luke]

I went to this URL - https://extremehw.net/search?q=hardw...elevance%22%7D

Using I see no difference in how the links on that page behave over the links in your main page. I looked in Chrome, Edge (chromium based), and Firefox. All links get darker and are underlined when I hover over them.

[panzerscope]

So just to re-iterate. Using the code as per my prior post, the Links on my Search Modules (.b-post-sm--compact) to the left hand side of my home page (https://extremehw.net/) named ''Latest Topics'' Behaves as I want it to with the Fade effect and the links transitioning to a red colour as per. However using the same code for .forum-list-container only results in the Fade effect, but it does not not fade to the correct red colour.

So I know the code works on some elements of the site, but not all. It is either that or I am using the wrong designation for the links that appear in the forum channel lists such as the channel links, Last active thread and last poster (See example image below of the links I am trying to influence)

[In Omnibus]

You're not using the correct selectors. You need to be as specific as possible when attempting to override the default CSS for links because the same default CSS applies to all links.

The forums selector is .forum-item a and .forum-item a: hover is where the transition properties should be applied.

The sub-forums selector is .subforum-list is and .subforum-list a: hover is where the transition properties should be applied.

The widget links are .ui-widget-content a and .ui-widget-content a: hover is where the transition properties should be applied.

[Wayne Luke]

So just to re-iterate.

Thanks for providing a more detailed description. Your previous descriptions of the problem didn't actually highlight the problem. The "Search Results" page and the "Search Module" on your home page are actually using the same code and templates. So you should be able to understand the confusion. The more detailed your description of the issue, the easier it is for someone to provide support. vBulletin is a large and complex application with over 40 Megabytes of files and templates plus millions of combinations on how the end user can have it deployed to their sites.

[panzerscope]

You're not using the correct selectors. You need to be as specific as possible when attempting to override the default CSS for links because the same default CSS applies to all links.

The forums selector is .forum-item a and .forum-item a: hover is where the transition properties should be applied.

The sub-forums selector is .subforum-list is and .subforum-list a: hover is where the transition properties should be applied.

The widget links are .ui-widget-content a and .ui-widget-content a: hover is where the transition properties should be applied.

Thanks for that, I had a feeling I was using the wrong selectors just due to the fact I could get the transitions working in other areas. Thanks for popping in and educating me. I will apply these and see how we fair.

Wayne Luke

Apologies for not being clear enough, I understand that there are soo many factors to VB or similar software platforms. I will be more clear next time

[panzerscope]

So I just tried using the following, the code in BOLD is working as expected, however the others after adding the proper selectors (Thanks again for that) I am still not getting the desired result, I just cannot see what the issue is. These are currently applied to this page if anyone needs to inspect: https://extremehw.net/

As a note, the CSS for The last one ''.ui-widget-content'' differs slightly as I had to removed the background element as it was messing with one of my buttons, but should make not difference as no background needs to be applied anyway for this to work.

[B].b-post-sm--compact a {
  color:#49a0cc; background:none;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.b-post-sm--compact a:hover { color:#b40300; background:none; }[/B]

.b-post__content a {
  color:#49a0cc; background:none;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.b-post__content a:hover { color:#b40300; background:none; }

.forum-item a {
  color:#49a0cc; background:none;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.forum-item a:hover { color:#b40300; background:none; }

.subforum-list a {
  color:#49a0cc; background:none;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.subforum-list a:hover { color:#b40300; background:none; }

.ui-widget-content a {
  color:#49a0cc; 
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
.ui-widget-content a:hover { color:#b40300;}

I would blame the code, but its working elsewhere, but if I have the right selectors and the code still does not work...then with my limited knowledge I am a little stuck