I'm using a CSS triangle to create a navigation arrow. Here's the stripped-down example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Triangle</title>
<style>
.nav {
width: 150px;
background-color: #cccccc;
font-size: 22px;
padding: 5px 0px;
text-align: center;
}
.nav a:link, .nav a:visited, .nav a:active {
text-decoration: none;
color: #000000;
}
.nav a:hover {
color: #ff0000;
}
.arrow-right {
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid #000000;
}
.arrow-right:hover {
border-left-color: #ff0000;
}
</style>
</head>
<body>
<div class='nav'><a href='http://example.com'>Next <div class='arrow-right'></div></a></div>
</body>
</html>
If you mouse-hover on the arrow, both the text and the arrow turn red, as expected. But if you mouse-hover only on the text, only the text turns red. Is there a reasonably simple way to "couple" these in the CSS, so that hovering on either produces the color change? I don't want the entire box to be an anchor - just the text and the arrow.
(I've also used some UTF-8 characters to make the arrows, but that triggers some interesting font-rendering problems on a Mac. Using » and « is appealing, but the lack of good "up" and "down" entities makes that one kind of a non-starter. Using images is out, because I need complete color flexibility.)
Change:
.arrow-right:hover {
border-left-color: #ff0000;
}
to:
.nav a:hover .arrow-right {
border-left-color: #ff0000;
}
DEMO 01 - Coupling anchor and element border
or if you want to combine them by changing :
.nav a:hover {
color: #ff0000;
}
to:
.nav a:hover, .nav a:hover .arrow-right {
color: #ff0000;
border-left-color: #ff0000;
}
and remove this completely:
/* remove this */
.arrow-right:hover {
border-left-color: #ff0000;
}
DEMO 02 - Couple anchor and element border
Try the hover selector on the nav as follows:
nav:hover a, nav:hover .arrow-right{color: red;}
Also, for the sake of best practice add the focus selectors too:
nav:hover a, nav:focus a, nav:hover .arrow-right, nav:focus .arrow-right{color: red;}
Related
I have a style rule:
.tabs li {
border: 1px solid transparent;
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
which should change the color of the li's background and border for all elements except second and last element when you mouse over them. But somehow it works for all li elements. What CSS rule should I use?
UPD
saNiks's answer helped me to find a solution. Here is what css code should looks like:
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:last-child:hover, .tabs li:nth-child(2):hover {
background-color: transparent;
border-color: transparent;
}
You need to rewrite your styles to use the :not selector in applying your desired default style as follows
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: transparent;
border-color: transparent;
}
Working JSFiddle Code here
You can add a class for the specific <li> tag that you want to change, for example:
<li class="some_class_name"> Some content</li>
and than to add style to this <li> by
.some_class_name{...
\\your style goes here}
Why not just do this? If the second item "AND" the last item is to be styled,
.tabs li:hover:not(:last-child):not(:nth-child(2)) {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
I want to apply a link selector hover effect which includes bottom border underline in an unordered list. Really, I know I can do a simple underline using a border-bottom: #FFFFFF solid 2px;, but I'd like to make a custom underline with box-shadow effect. So I have two issues.
my border is showing up all the time, not just when I hover.
When I tried to add a box shadow to my .underline class it goes around the whole list item and does not create a separate line. I guess we can get to this item later.
MY CSS CODE
li {
margin: auto 0px 20px auto;
font: 1em 'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255,255,255,0.5);
display: block;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
}
.underline {
border-bottom: #FFFFFF solid 2px;
}
MY HTML CODE
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a></li>
<li>Revealing CSS3 Menu</li>
</ul>
I would really like to be pointed to a comprehensive article about how to build rich HTML elements via CSS specfically using :before and :after and being able to use multiple classes on one selector in CSS properly.
Here is a JSFiddle of what I have (broken) http://jsfiddle.net/jellis3d/a8svpwr4/2/. Also here is a picture of what I'm after. I really exaggerated the underline in order to show what I'm looking for. The line does not have to have rounded edges either.
You could do it by apply border-bottom to .underline:hover and box-shadow and display: inline-block; to li a tag.
JSFiddle - DEMO
HTML:
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a>
</li>
<li>Revealing CSS3 Menu
</li>
</ul>
CSS:
body {
background: gray; /* only for demo */
}
li {
margin: auto 0px 20px auto;
font: 1em'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
display: inline-block;
box-shadow: 0px 5px 5px #000;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.underline:hover {
border-bottom: #FFFFFF solid 2px;
}
i have made a basic demo on js fiddle showing what i think your after
jsfiddle link
it uses the below css which im sure you can then see what i did and make it into what your after.
li a{
color:blue;
text-decoration:none;
}
li a:hover{
color:red;
border-bottom: black solid 1px;
box-shadow: 10px 10px 5px #888888;
}
You want to add a box-shadow effect on hovering, right? You don't need to use an extra element like .underline then. Just add it to li a:hover
li a:hover {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
box-shadow: 0 1px 0 0 rgba(0,0,0,1);
}
You can read more about pseudo-elements like :before and :after on W3C: http://www.w3schools.com/css/css_pseudo_elements.asp
I made a small demo with your code using :before on hover: http://jsfiddle.net/m9czpzs5/
so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO
I have an tag, with the following markup:
#leftMenu ul li a {color: #111; text-decoration: none; display: block;}
And I want to be able to hover over it, and display a triangular end. Similar to this shape:
http://www.promotionalpromo.com/Upfiles/Prod_v/1-7-8-x-2-7-8--Long-Arrow_2010017055476.jpg
But not with the same dimensions, more along the lines of:
width: 200px; height: 20px;
Either I chop the two ends, (border-top-right and border-bottom-right) or I add css on with :after, however I need all this to happen when the user hovers of the tag.
How can I achieve this?
I found this site very usefull :
http://apps.eky.hk/css-triangle-generator/
when i needed to create triangles.
it generates a triangle for you.
Now after u generate the triangle, all u need to do is use :before or :after on your desired element to make it work, in your case hover as well.
Just for reference this is how I did it:
#leftMenu ul li a {color: #111; text-decoration: none; display: block; position: relative;}
#leftMenu ul li a:hover {color: #555; text-decoration: underline; background: #EEE; }
#leftMenu ul li a:hover:after
{
content:"";
float:right;
position:absolute; top:0; right:-12px; width:0; height:0;
border-style: solid;
border-width: 13px 0 12px 12px;
border-color: transparent transparent transparent #EEE;
}
I have a problem some of my links keep moving a couple of pixel on hover does anyone know a fix for this.
Currently me code is like this
<a class="read-more-link" href="/what-to-do-now/week49/flowers-checklist/">See all Flowers jobs</a>
the css
a:hover{
border-bottom:1px solid #000;
}
a{
color: #172D02;
font-weight: bold;
text-decoration: none;
}
.checklist .read-more-link:first-letter {
text-transform: uppercase;
}
.checklist .read-more-link {
clear: both;
display: block;
float: left;
line-height: 1.1;
text-transform: lowercase;
background: url("/images/double_arrow.png") no-repeat scroll left center transparent;
padding-left: 14px;
}
This is because you have border-bottom set on hover.
Therefore this is adding a 1px border underneath your link when it is hovered over. This can affect the position of other relative elements.
Change this to text-decoration:underline; or add a hidden border-bottom to the standard style:
a {
border-bottom:solid 1px transparent;
}
write
a:hover{
text-decoration:underline;
}
in place of
a:hover{
border-bottom:1px solid #000;
}
and remove this there is no need of it
.checklist a, .checklist a:visited {
border-bottom: 0 none;
position: relative;
}
You can add one empty container like below, on top:
<div class="container" style="height:5px"></div>