I have a <div> with a class that gives it the color blue, but the color blue does not appear. I do not understand why?
Is this because a has priority over the class blue? I tried: a .blue{} as it is more specific it should win, is that wrong?
If I delete "Some link" then it works. Why? I do not see the relation
Here is the example to check:
a {
outline:0;
text-decoration:none;
}
a:link, a:visited {
color:black;
}
a:hover {
color:black;
text-decoration: none;
}
.blue {
color:blue;
}
<p>Some text, some text</p>
<p>
Some link
<p>
<a href="next.php">
<div class="blue"> This text should be blue </div>
</a>
JSFiddle
You just need to close your <p> tag:
<p> Some link </p>
try the following :
a { outline:0; text-decoration:none ; }
a:link,
a:visited { color:black; }
a:hover { color:black; text-decoration: none; }
.blue { color:blue; }
<p> Some text, some text </p>
<p> Some link </p>
<a href="next.php">
<span class="blue"> This text should be blue </span>
</a>
Chrome was correcting your code and placing the div with the blue class outside of the a tag as it is a block element and the a is not.
Note: the malformed p tag solved it
Related
I want to change hover color in laravel 5.2
I'm try but can't.
Here is my link
<div class="classname">
<h4 align="center" class="well"><b>Course Materials<b></h4>
</div>
Here is my css
div.classname a:hover {
color: green;
}
Try:
.classname a:hover { color: green }
OR
change class to your link
a href="your link" class="classname" >.... < / a >
.classname a:hover { color: green }
I hope it work!
Make the changes as below in your css codes and it will work for you.
<div class="classname">
<h4 align="center" class="well"><b>Course Materials<b></h4>
</div>
In you css make changes and replace the code with lines below:
.classname a:hover {
color: green;
}
<a href="#" class="a-hover-underline">
<div class="grid-md-2-3 background-div"></div>
<div class="grid-1 grid-md-1-3 content-div">
<h2>some text...</h2>
<p>some text...</p>
</div>
</a>
So I have this setup with a nested 'a' tag... What I want to achieve is to underline the text on anchor hover. I have a:hover { text-decoration: underline } in my stylesheet file, but the text doesn't get underlined on anchor hover. I tried testing hover event on that 'a' tag with jQuery and it works.
Any ideas or workarounds?
Thanks!
Just set the original without hover to not underline and it should work.
.a-hover-underline:hover { text-decoration:underline; }
.a-hover-underline { text-decoration:none; }
JSFiddle - http://jsfiddle.net/d2k2t7oc/
see this
this is working for me. I am getting yout question wrong?
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
I have 2 "links" which has to get a color when i click on them. But they need also be in a h1 tag.
Like this:
<div id="content" class="work">
<h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
<h1 style="border-bottom:1px solid #CCC;"> / </h1>
<h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>
But it wont change color when i click in one of them.
Here's the CSS
#webbdesign:target ~ #link-webbdesign {
color:#00A2FF;
}
That's not what :target is for. For styling the link you click on you should use h1 a:active.
h1 a:active {
color:#00A2FF;
}
If you want the changed colour to persist until the user clicks something else, then use:
h1 a:focus,
h1 a:active {
color: #00A2FF;
}
DEMO
This is my link:
<div id="yabnetwork">
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
</div>
My CSS styles for this div:
#yabnetwork{
font-size:15px;
text-align:right;
}
#yabnetwork a{
color:red;
}
Why are my links not red? I can't change them.
The first part of the a-tag seems to miss a closing bracket and a quote-mark.:
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network" > <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
Two recommendations are to start using a text-editor with color-markup and run your code in the html-validator:
http://validator.w3.org/
It is red! If tags are closed properly and attributes ended with " as they should.
<html>
<head>
<title>link example</title>
<style type="text/css">
#yabnetwork a{
color:red;
}
</style>
</head>
<body>
<div>
<div id="yabnetwork">
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network"> <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
</div>
</div>
</body>
</html>
Maybe you override the CSS rule somewhere? If yes, you might try !important as well:
#yabnetwork a{
color:red !important;
}
Try it this way:
a:link{
color:#00CC66;
text-decoration: none
}
a:visited{
color:#ff0000;
text-decoration: none
}
a:hover{color:#f00000;
text-decoration: none
}
a:active{color:#f00000;
text-decoration: none
}
Links can have different states:
a:link --> default
a:visited --> if the user already visited this page
a:hover --> if the mouse cursor is over the link
a:active --> if the link represents the page currently displayed
check this:
#yabnetwork a{
color:red !important;
}
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }