Best way for users to be able to permanently view links when hovering over area in web page? - hover

Craftime Test site
Hi,
If you view test page attached and the useful links section on the right hand side below the menu, when you hover next to "click here if you would like to contact Craftime " you will see an email contact address and below this a link to Facebook.
I would like users to be able to permanently see these links. I can't work out where to adjust CSS I think it may be appearing as white so you can't see the text.
Any help greatly appreciated.
Kind regards, Matt.

layout.css, line 35
a:link, a:visited {
color: #fff;
text-decoration: none;
}
Remove the color: #fff; line to make it visible always.

Related

I want my link to be underlined, but only when I am actually on that page at that moment

How can I make a link be underlined that I am on at that moment. (This is in my navigation, so when I am actually visiting my "Home" or "About Us" page I want the link to be underlined, but only then. Is that possible to do with CSS? (Not JavaScript.) Thank you!
This sounds like more than just wanting to underline when the link is hovered over. Looks like the suggestion here was to add a CSS class onto each page for the link which is "the current page".
If you wanted your link to have the underline only when you hovered it. You should write something like this in your CSS:
a:hover {
text-decoration: underline;
}
This purely adds the underline when the anchor is hovered over.
If you wanted your link to have the underline appear after you clicked it, you should write something like this in your CSS:
a:active {
text-decoration: underline;
}

Hover effect in header menu "About Us" is always triggered on my home page

I am building a website for friends of mine and I stumbled upon a bug that I can't figure how to get rid of and I created an "About Us" section on the home page, and the "About Us" button in the header menu links to an anchor right above this section.
However, the hover effect for the "About Us" button is always triggered on the home page (screenshot bellow)
Hover_effect_bug
After inspecting the element, I figured that the bug might happen because of the "current_page_item" class (a default wordpress class), but I couldn't find why it would trigger the hover effect (here is what I could find about the class effects) :
.main-navigation li li.current_page_item a:hover,
.main-navigation li li.current_page_item a:focus,
{
color: #fff;
}
.navigation-top .current_page_item > a
{
color: #767676;
}
Any idea what causes this to happen ?
Thanks in advance for taking the time to read and answer if you can!
I wish you a pleasant day !
thank you for your answers, for some reason mail notification were disabled so I didn't see that you did ^^'.
I searched more, and I found out that my first hypothesis was wrong : it was the current-menu-item class that bugged. I simply disabled it and everything was fine. I still don't know the exact reason why it was a problem in the first place, however.
You can find a live version of the website here : www.euro-batim.fr
(the current-menu-item still exist in the style sheet, however, I turn it into commentaries). If anyone is interested, I can do some extra digging to find what exactly created the problem.
Have a nice day !

custom CSS - stuck, i've tried all sorts of combinations

I know this must be simple, but I am just absolutely stuck! I want to change the below to www.readyprint.biz:
When you hover a button (e.g. products) it’s purple/lavender – i want to change it to blue
I want to change the social icon colours – at moment it’s purple/lavender, i want to change it to white
I've tried:
.color-linen #menu-primary li.current-menu-item>a:hover{
background: #42b1fe;
}
But that doesnt work.... same logic I applied to the social icons. I right click the icons in browser, click inspect, and try and figure it out on the CSS section.
please help!
This is a wordpress site by the way, and I'm using a CSS plugin to handle the CSS.
Thanks all!
I think u have already fixed the issue didn't u?
When I visit readyprint.biz the menu item is blue when I hover the mouse.
Maybe u should refresh your webpage.
Edit:
To change the icon to white.
Go to the code:
color-linen #footer a:focus {
color: #565656;
}
Change the #565656 to #000000

Anchor tags don't work and stay selected until I click again

I'm creating some sort of dashboard which gives the different statuses for data. If you click a status only the objects with that status should be shown. Right now I still have
*TEXT*
for all the anchors. But when I click them my URL doesn't change and when I move my cursor to a different location the text is still underlined.
The first underlined rule in the image is a hover, the last one is the one I clicked before. Now only after I click somewhere else, even empty parts on the website, the underlining goes away.
Does anyone know why this occurs and how I can fix it?
Thanks in advance.
JSFIDDLE: http://jsfiddle.net/xcjufs6e/
I was able to solve it by adding these lines in the CSS
.conexio-info-message a:focus {
text-decoration: none;
}
.conexio-info-message a:focus:hover {
text-decoration: underline;
}

Make hyperlink underline appear on mouseover (currently the opposite)

I am wanting to imitate this website, which only underlines a hyperlink once the user hovers over the link.
Currently in my Magento store, any hyperlinks are already underlined before the user hovers over it & when the user does hover over the link, the underline is removed.
So basically, I want the very opposite of what is happening.
I am using Modern theme f001. Can anyone explain how I could go about changing this?
You need to change in the CSS file of your theme:
http://www.efficienttrade.co.nz/media/css/2221f7ff45d5b039dfab39cc684c3166.css
Line 1178:
a {
color: #1E7EC8;
text-decoration: none; // changed from text-decoration:underline
}
Line 131
a:hover {
text-decoration: underline; // changed from text:decoration:none
}
Please note that the line numbers might be wrong and you might need to search for the a class definition in the CSS file in order to change them.