Do you know how to style specific links? I put my code so that every link will have a transition of 0.400 ms for the font to grow a bit bigger when the mouse cursor hovers over it. But the problem is that I have another link that is 30px big and when I hover over it, it turns to 18px because every single a href in tag has that, but how can I change it?
.link_2 {
font-size: 30px;
}
a {
color: black;
transition: 0.4s;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
font-size: 20px;
}
<a class="link_1" href="#">Text that's normal</a>
<a class="link_2" href="#">Text with problem</a>
Change the a:hover to specific
That is Change the a:hover to .link_1:hover
.link_2 {
font-size: 30px;
}
a {
color: black;
transition: 0.4s;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.link_1:hover {/*Changed here*/
font-size: 20px;
}
<a class="link_1" href="#">Text that's normal</a>
<a class="link_2" href="#">Text with problem:Solved</a>
Related
HTML code:
<div id="but_2" class="button">
Portfolio
</div>
<div id="but_1" class="button">Home</div>
CSS code:
.button {
background-color: #ff0000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#but_1 {
position: absolute;
right: 50px;
top:20px;
}
My css button isn't working, it brings me to where I need to be, but it is blue and is underlined(the text in the button) I have text-decor none, but it still isnt going away.
Target the a element to remove the underline and change the color. You can target it with .button a {}
.button {
background-color: #ff0000;
border: none;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#but_1 {
position: absolute;
right: 50px;
top: 20px;
}
.button a {
text-decoration: none;
color: white;
}
<div id="but_2" class="button">Portfolio
</div>
<div id="but_1" class="button">Home</div>
You need to be more specific and target the a href attribute.
For example:
.button a {
text-decoration: none;
color: #000;
}
https://jsfiddle.net/xojev64e/
a {text-decoration: none; color:#FF0000;} shows unvisited link
a:visited {color:#FF0000;} shows visited link
a:hover {color:#FF0000;} shows mouse over link
a:active {color:#FF0000;} show selected link
use all property to define you color
I think you have not clear your browsing history of your browser. First clear you history, session, or cookie and then perform following steps.
Add following to your css file
.button a {
text-decoration: none;
color: white;
}
And add this for more attraction on mouseover
.button a:hover {
text-decoration: none;
color: black;
}
Hope this will help you.. :)
I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.
I tried
a href="/" style="color:#FFF">Home
This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.
Any help would be appreciated!
Thanks
You can use a class, take a look at this
article {
background: #ccc;
padding: 20px;
}
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
a.white:link, a.white:visited{
color: #FFF;
text-decoration: none;
}
a.white:hover, a.white:visited:hover{
color: #F00;
text-decoration: underline;
}
<article>
<p>
normal
</p>
<p>
alternate
</p>
</article>
Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...
a.white:link, a.white:visited {
color:#ffffff;
}
In HTML...
...
Just use a class for this.
body {
background: gray;
}
a.whiteLink {
color: white;
}
a {
color: #F00;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
Home
My problem is that, when I hover over my div, it doesn't change the links color to what I want it to be. It just stays its default black color.
How can I make it so that when I hover over the thumbnail-cointainer div, it changes the color of the link?
<div class="thumbnail-container">
Text Here
</div>
CSS:
a {
color: #000000;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
float: left;
}
.thumbnail-container:hover {
color: #0088cc;
}
The problem is selector specificity. Select the anchor as well:
.thumbnail-container:hover,
.thumbnail-container:hover a {
color: #0088cc;
}
Or depending on what you want you may use inherit. Just add this:
.thumbnail-container a {
color:inherit;
}
.thumbnail-container:hover a {
color: #0088cc;
}
I have these styles for all my a links globally. I am not able to override the a link style in a div on the same page.
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Now I want to override the style for anchor link to change its color to white on hover but only in a div of multiple classes unseen and notification container like this one...
<div class="unseen notificationContainer">
<a href="profile?customerId=1365764036258">
<strong>robert</strong>
</a>
sent you a friend request
<a href="friend_request?type=accept¬ificationId=1365764054463">
Accept
</a>
<a href="friend_request?type=reject¬ificationId=1365764054463">
Reject
</a>
</div>
so I add the following to my CSS
.unseen{
background: #09f;
color: #fff;
}
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
When the page loads hovering on first link makes changes its color to white but the other three take the color blue of the background. I have been on this for the past one hour and not it's just irritating. Style for notificationContainer is as below
.notificationContainer{
width: 390px;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
Thanks in advance.
CSS cannot possibly have bugs, only a browser can (unless you mean errors in the CSS specification, etc).
That said, this is a bug in your code and not with the browser:
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
The space between a and :hover means any element that is :hover and within a, much like .unseen a means a elements within .unseen, so that won't work. You need to remove that space:
.unseen a:hover{
color: #fff;
text-decoration: underline;
}
Not really sure what you're after - your question doesn't really make it clear. Forgive me if I've miss-guessed. Does this help? (You can target elements with multiple classes)
<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.unseen.notificationContainer a:hover
{
background: #09f;
color: #fff;
text-decoration: underline;
}
.notificationContainer
{
display: inline-block;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
</style>
and
<div class="unseen notificationContainer">
<strong>robert</strong>
sent you a friend request
Accept
Reject
</div>
I have a hyperlink in my website that I want to be part #A0A0A0 and part #880000 for a:link and a:visited, and I want it to change to part #FFFFFF and part #AA0000 for a:hover and a:active. But I want it to be all one link. I have tried two solutions so far, but neither worked out the way I want.
The first was:
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:hover { color: #ffffff; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
<a class="menu" href="/about.html">Dubious
<span style="color: #880000;">Array</span>
.net</a>
In this solution, the color of the middle part ('Array') stays as #880000 the whole time and doesn't change to #AA0000 for :hover or :active.
The second solution was to create a <a> </a> for each part of the string (so one for 'Dubious', one for 'Array' and one for '.net') and have the css for the middle <a> </a> be
a.redMenu:link { color: #880000; text-decoration: none; }
a.redMenu:visited { color: #880000; text-decoration: none; }
a.redMenu:hover { color: #AA0000; text-decoration: none; }
a.redMenu:active { color: #AA0000; text-decoration: none; }
The colors worked fine this way; but the string was three separate links, so mousing over one link wouldn't change the color in the others.
So what I want to be able to do is to change the css in the middle of a hyperlink from a.menu to a.redMenu then back again to a.menu, but I can't work out how. Can anyone here solve my problem?
Thanks, Jacob
You can use your original HTML, just remove the inline style:
<a class="menu" href="/about.html">
Dubious<span>Array</span>.net
</a>
Then simply add these css declarations for span:
a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}
a.redMenu:hover span { color: #AA0000; text-decoration: none; }
This tells the span what color to be when it's parent link is hovered.
<html>
<head>
<style type="text/css">
p { background: #00c }
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }
</style>
</head>
<body>
<p><a class="menu" href="/about.html"><span class="normal">Dubious
<span class="hilite">Array</span> .net</span></a>
</p>
</body>
</html>