I have a basic menu bar not unlike the SO one next to the logo (so questions, tags etc.). I have all the styling, but it changes when I add links in. This is hard to explain, so here is my menubar styling:
div.menubar ul
{
background-color:#FF0000;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
div.menubar li
{
display:inline;
margin:0;
padding:0;
}
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#FF0000;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
And the menubar code:
<div class = "menubar">
<ul>
<li>Home</li><!--does not work-->
<li>News</li><!--works-->
<li>Contact</li>
<li>About</li>
</ul>
</div>
When the link href is something like #home the link background changes to green on mouseover. However, when the link href is home.php, nothing happens. Why is this happening?
As a quick fix, move the hover state to the bottom of your CSS.
In the long term look at the CSS specificity and make sure you're not overriding your hover state with something more 'important'
Fiddle here: http://jsfiddle.net/mq7n3/
Move this to the bottom
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:hover //this is overridden by below rule, div.menubar a:active //This works
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link{ //this is overriding div.menubar a:hover
background-color:#FF0000;
}
Try either putting the :hover rule after the :link rule, removing the :link (is it necessary?), or adding in !important to the :hover rule (not recommended).
You can remove a line of code to get it working
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
/* background-color:#FF0000; REMOVED */
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
See it working
This works if your anchor tag has a # or not (although no idea why on the original issue)
Related
I will short and clear. I have this html code snippet.
<nav>
<span class="heading">CodingHero</span>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Now I have this CSS part
nav ul li a {
font-family:'Poppins', sans-serif;
font-size:20px;
color:white;
opacity:0.8;
margin:0px 20px;
}
This is also okay. But I found this weird behavior while dealing inside media queries.
nav ul a {
font-size:44px;
background-color:yellow;
margin:0px;
}
My background color works yellow fine.
But my font-size and margin doesn't work.
As soon as I provide specificity as I originally used in CSS part,
nav ul li a {
font-size:44px;
background-color:yellow;
margin:0px;
}
This works, my font-size and margin also comes into effect.
Can someone explain why I have to use the original selector that I first used to get all properties to act?
Why my font-size and margin were not applied when background color in same part is applied.
What's going on here? Any resources to clear my head.
Any response is appreciated.
Thanks !
background-color:yellow; was applied because the other selector with higher specificity (nav ul li a) doesn't contain a background-color property, so nothing overrides it.
If you were to add one like
nav ul li a {
font-family:'Poppins', sans-serif;
font-size:20px;
color:white;
opacity:0.8;
margin:0px 20px;
background-color: red; /* added */
}
then it'll override background-color:yellow, just like it override margin and font-size
I'm trying to create a guitar-related website and learn html and css in the process, but I've ran into a problem: I've created a list where all the elements are links and I'd like for them to be white but turn yellow when hovered over. I can't seem to accomplish both of these objectives at the same time. Either they're always white or they turn yellow when hovered over but otherwise stay purple.
I've tried creating the hover function as an id (using it only once, as you do with id's), creating a div with all the necessary classes, inserting the hover function into the ul list or into each of the list elements or into the link descriptions. Nothing has worked so far.
HTML and CSS (separate files):
<div class="ul2 alink1 ahover1 avisited1">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank"
>Electric guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Acoustic_guitar" target="_blank"
>Acoustic guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Semi-acoustic_guitar"
target="_blank" >Semi-acoustic/semi-hollow guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Guitar_synthesizer#MIDI_guitars"
target="_blank" >MIDI-guitars</a></li>
</ul>
</div>
</body>
.body {
background-color:black;
}
.alink1 a:link {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
.avisited1 a:visited {
color:white;
}
.ul2 {
list-style-type:circle;
color:white;
}
When it comes to pseudo selectors, they work in a specific order. So the the hierarchy is as follows:
:link
:visited
:hover, :focus
:active
What you want to achieve can be done with these simple modifications:
.alink1 a {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
Remove the a:visited selector from your CSS as it's not needed, remove the a:link and have it as an a tag only.
I believe this is what you are after.
There is a problem that i can't solve.
I am trying to make button from text by changing it on hover. I am using css to change their font color or background color on hover. There is no problem to this point.
But when i give them a link <a href="www.twitter.com"> I have a problem because at this point my css doesn't work because of html's link hover and visited functions.
The big problem is visited .. i don't want the visited color to work. If visited color works, my links doesn't look like good.
If you can help me about links in texts (making hover) without problem of active section...
Thanks
By giving the link ("a") the css propertie text-decoration:none; the element wont use the underline and visited color any more.
a{
text-decoration:none;
color:white;
}
a:hover{
color:red;
}
div{
background-color:#000;
}
http://jsfiddle.net/7rrruajb/1/
Hope this is what your looking for.
a:visited{
text-decoration:none;
}
Just use a instead of a:link - a applies to unvisited and visited link, a:link just unvisited ones.
Compare the two:
a:link
a:link {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
a
a {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:
.faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
<p class="quetn">5.14 Where do i see my test results?</p>
One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.
Just use the same rule for when the link is not being hovered:
.faq .section p.quetn a, .faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
EDIT
Juse seen that you can't change the CSS for some reason.
Just create a new class with the same styles.
a.class, a.class:hover {
text-decoration:underline;
font-weight:bold
}
<a class="class" title="" href="#">Some Link</a>
EDIT v2
Do you want to style the text but remove the link markup?
It would just be
<p class="class">Text</p>
p.class {
text-decoration:underline;
font-weight:bold
}
Like this
demo
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
}
Then instead using
.faq .section p.quetn a:hover
use
.faq .section p.quetn a
If you are targeting only P tag instead of anchor tag, then use it as below :
.faq .section p.quetn
html
<p class="quetn newClass">5.14 Where do i see my test results?</p>
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
cursor:default;
}
.newclass a:hover{
text-decoration:none; !important
font-weight:bold; !important
cursor:default; !important
}
Use !important for priority.
Code below for Hover Enable
a:hover {
background-color: yellow;
}
Code below for Hover Disable
a:nohover {
background-color: yellow;
}
I have two kind of links, the one should be white, the other links should be black. Therefore I added a class to the first navigation
<nav class="navigation">
Über mich
</nav>
In CSS I now did this
.navigation
{
float:right;
margin-top:15pt;
}
.navigation a, a:visited, a:active{
color:white;
text-decoration:none;
margin-left:20px;
}
.navigation a:hover
{
color:white;
text-decoration:underline;
text-decoration-color: red;
margin-left:20px;
}
Now I have other links that should be displayed in black and not in white
<b>Source Code runterladen:</b> Link
Note that this link IS NOT inside a navigation tag. So I did this in CSS
.sourceCode a, .sourceCode a:hover, .sourceCode a:visited, .sourceCode a:active
{
color:black;
}
But the problem is that both links are either white or black. I want them to be different, but it doesn't work and I don't really know why.
Here's the complete source code
http://jsfiddle.net/bVN9X/
Note that the Links in the header are white, but also the links that should be under "Projekte" are white, too. I don't really know why.
Your selector must be defined in this way:
a.sourceCode
Because the way you have it now, it's looking for an a tag inside something with a sourceCode class.
You should change you css as shown below:
a.sourceCode, a.sourceCode:hover, a.sourceCode:visited, a.sourceCode:active
{
color:black;
}