Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to build a website but for some reason my a:hover is not working. When I hover nothing happens. I need some help.
My jsfiddle: https://jsfiddle.net/LfaLt1db/
Thank you in Advance!
Because you have .main-content a structure in yor HTML, and .main-content li a in your CSS. Just remove `li
.main-content a:hover, .sub-content a:hover {
text-decoration: underline;
background-color: #008080;
}
Or add
a:hover {
text-decoration: underline;
}
to your CSS file.
change your
.main-content li a:hover, .sub-content li a:hover {
text-decoration: underline;
background-color: #008080;
}
css code to
.main-navbar li:hover, .sub-navbar li:hover {
text-decoration: underline;
background-color: #008080;
}
Related
Good day! The problem appears with actual Chrome version I already have.
This is the actual Chrome version I have 99.0.4844.51
Suddenly discovered that menus (we uses simple downloaded several years before with some style change) on our website go now wrong, for example that there is no font highlight (change colors) on menu hover
Before it was:
nav ul li:hover {
color: white; /* color menu active font */
background: #005DAB;
}
Now it doesn't work and was implemented also additional:
nav ul li a:hover {
color: white;
}
To make it highlighted as before.
I'm attaching complete JS fiddle with code
But together with it appeared other very strange story - disappearing of menu buttons after hover. Because probably it cannot show in other browsers I made Youtube video to show completely.
I'm sorry but I don't know where is the mistake and what to do. Your assistance is kindly appreciated!
I think issue is happening in menu items which has children. You can try this css if it works:
#media (min-width:761px){
li.sub:hover a, li:hover a {
color: white !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li a{
color: grey !important;
}
}
#media (max-width:760px){
li.sub:hover ul a {
color: white !important;
}
li:hover a {
color: #005DAB !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li.sub a:hover {
color: #005DAB !important;
}
li a {
color: white !important;
}
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I've set the following default styles for my main site links:
a {
color: #000;
text-decoration: none;
}
a:visited,
a:focus,
a:active {
color: #000;
}
a:hover {
color: red;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
When styling other links, I've followed the same pattern, e.g:
.button {
color: #fff;
background: #000;
}
.button:visited,
.button:focus,
.button:active {
color: #fff;
}
.button:hover {
color: #000;
background: #fff;
}
Is it necessary to include focus outline styles for other links or will the browser fall back to my defaults? I understand that having correct focus styles will aid accessibility.
If the :focus pseudo class on your 'classed' links should not be different from your main links, there is no need to declare it again.
I am running into a weird issue with bootstrap 3, I am trying to make my home link in my navbar active when the page loads. Now looking at this bootstrap example:
http://getbootstrap.com/examples/starter-template
It's as simple as adding class="active on the li you need to be active..
But for some reason this isnt working for me, I have set up a fiddle to demonstrate the issue below. Does anyone have any idea why this is working for the example but not in my case?
http://jsfiddle.net/QS7f8/
Ah I have figured it out, I had some conflicting classes for the active state.
I had:
.navbar ul.nav a:active {
color: #fff !important;
background-color: #ff7454 !important;
}
.navbar .nav li.active a {
color: #bababa;
}
When only this was required:
.navbar .nav li.active a {
color: #fff;
background-color: #ff7454;
}
Here is the working fiddle: http://jsfiddle.net/QS7f8/2/
I am creating a dropdown menu for a Wordpress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don't seem to work in my case.
I think the solution must be:
parent:hover child { ... }
and it works for example here.
I tried to do the same with my code (please see last CSS selector) but it doesn't work here.
Update your CSS from:
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
To
#menu ul li:hover a {
background-color: #006699;
}
#menu ul li a:hover {
color: #FFFFFF;
}
Updated example on jsFiddle.
You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:
.menu ul li:hover > a {
background-color: #006699;
color: #fff !important;
}
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.