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>
Related
I have links
I am trying to make link #one black on :visited and #two blue. When visiting #two reverse should apply #one should be blue and #two should be black. I am trying to color the last visited link black and others to default. I tried
a {
color:blue;
}
a:visited ~ a:not(:visited){
color:red
}
I am trying to achieve this with just CSS without using JS.
a {
color:blue;
}
a:visited{
color:black;
}
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've just wasted an afternoon figuring out that the a:visited selector in CSS has all attributes disabled apart from a handful that are directly related to colour (see here: http://www.impressivewebs.com/styling-visited-links/ ).
Anyway, I'm wondering if it's possible to unset an attribute set for a:link? I have an a:link selector that fills in the background with a CSS gradient, but it would be nice if this could go grey for a:visited.
According to the new implementation, you can set background-color for a:visited, but unfortunately this gets overridden by the background attribute for a:link because a:visited can't use background now.
All I'd like to do is unset background for a:visited so that background-color is used. Does anyone know if this is possible?
use a instead of a:link for background color
see fiddle here
a{
background: green;
}
a:visited{
background: orange;
}
Give your hyperlink a display style of inline-block
a{
display: inline-block;
background-color: red;
//this becomes the default bgcolor; override it in subsequent pseudo state styles
}
This allows you to specify background colors for your hyperlinks.
You have to normally specify the styles for hyperlinks in the following order
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
In this order the visited link style overrides the normal link style. So, your css for visited will be applied after you click the link.
Make sure that you declare a:visited after the a. Otherwise the a will overrule it.
a {
background: #ff0000;
}
a:visited {
background: url( none );
}
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;
}
Site navigation html:
<div class="main_nav">
<div>Home</div>
<div>Company</div>
<div class="active">Franchise</div>
</div>
When a link is hovered it gets a specific background color.
My question is, how can I keep this hover state while the clicked page is loaded and the old is still displayed? I mean you hover a link item, the background changes, you click the background changes to default and the new site starts loading.
This is not necessay when the new page is loaded fast so you not really see the difference. However I am curious to know if this is possible with just css techniques.
Any ideas?
My css:
.header_wrapper .main_nav div a:link{
display:block;
text-decoration:none;
color:#f5f5f5;
}
.header_wrapper .main_nav div.active a:link{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:hover{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:focus{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
Hey now used to focus properties as like this
a:focus{
// css properties
}
Live demo
Try like this..
If you are having a class for your <a> tag than use this :
a.classname:focus {
color: /*whatever you want*/ ;
}
If you want to apply all <a> than use this :
a:focus {
color: /*whatever you want*/ ;
}
try this:
<div class="<?=($_REQUEST['args'] == 'franchise')?'active': ''?>">Franchise</div>