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;
}
Related
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>
I have a navigation bar list and when one of the list items is active I would like it to be double the size of the others, making it clear that is the page you are on. However, my current code only makes it bigger during the mouse click, not while you're on the page as I would like.
What am I doing wrong?
.sellingmethodnav {
background-color: #3F51B5;
list-style: none;
text-align: center;
}
.sellingmethodnav li {
display: inline;
}
.sellingmethodnav a {
display: inline-block;
padding: 10px;
color: #f2f2f2;
}
.sellingmethodnav li:active {
font-size: 200%;
color: #f2f2f2;
}
<div class="sellingmethodnav">
<li>CPC</li>
<li>CPM</li>
<li>CPA</li>
<li>CPI</li>
<li>CPE</li>
<li>CPV</li>
<li>CPCV</li>
</div>
You can try this:
HTML
<div class="sellingmethodnav">
<li>CPC</li>
<li>CPM</li>
<li>CPA</li>
<li>CPI</li>
<li>CPE</li>
<li>CPV</li>
<li>CPCV</li>
CSS
.sellingmethodnav a:active, .sellingmethodnav a:focus {
font-size: 200%;
color: #f2f2f2;
}
https://jsfiddle.net/tractionworks/nm934g5h/1/
Is that what you are going for?
I would like to change the look of all anchor tags in the body except ones in the navbar, I tried:
a:not(.navbar) a {
color: #333;
}
a:hover:not(.navbar): {
color: #999;
}
But it doesn't work, all tags became the same.
Is this possible?
EDIT: I have some other attributes such as transitions as well, so I can't set the restore the values for the rest.
Have you tried selecting .navbar a tags and restoring their values?
a {
color: #333;
}
a:hover {
color: #999;
transition: color 2s;
}
.navbar a,
.navbar a:hover {
color: initial;
transition: none;
}
I think the code is quite self-explanatory, but I'll explain it:
Select all divs except the ones with class "navbar", and to all links inside those apply certain styles.
div:not(.navbar) a {
color: #333;
}
div:not(.navbar) a:hover {
color: #999;
}
div:not(.navbar) a {
color: red;
}
div:not(.navbar) a:hover {
color: green;
}
<div>
link
</div>
<div class="navbar">
link should NOT be red
</div>
<div>
link
</div>
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
On Chrome and Firefox, if I apply a text-decoration:underline on a tag, by default the underline does not apply to the pseudo element.
But on IE it does, and I can't remove it.
I want the link to be underlined, but not the pseudo element.
It work if I add a span inside and put the underline on it, but I want to know if it can be made without additional markup.
a{
padding-left: 9px;
position:relative;
display:inline-block;
}
a:before{
content:'\203A\00a0';
position:absolute;
top:0;
left:0;
display: inline-block;
}
#underline{
text-decoration: none;
}
#underline:hover{
text-decoration:underline;
}
/* special for IE */
#underline:hover:before
{
text-decoration:none !important; /* does nothing ! */
}
#color{
color:green;
}
#color:hover{
color:red;
}
#color:hover:before{
color:green; /* work ! */
}
#span{
text-decoration: none;
}
#span:hover span{
text-decoration: underline;
}
underline
<br>
color
<br>
<span>with span</span>
It seems that IE don't let you override the text-decoration in the pseudoelement if it isn't set in it.
First let the pseudo-element be underlined - text-decoration: underline - and afterwards override this with textdecoration: none.
#underline:hover:before
{
text-decoration:underline;
}
#underline:hover:before
{
text-decoration:none;
}
As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though.
a {
color: green;
display: inline-block;
padding-left: 9px;
position: relative;
text-decoration: none;
}
a:before {
content: '\203A\00a0';
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
a:hover {
border-bottom: 1px solid green;
}
a:hover:before {
border-bottom: 1px solid white;
}
Hover to check underline
you can add this to your css. this helped me in the IE
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before,a:after { text-decoration:underline;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }