I have a compound hyperlink that contains two span elements, one of which I want to underline on hover, and the other not. A good example of this is the name / username link pair found at the top of Twitter tweets. I just can't figure out how they do it.
My attempt:
HTML:
<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>
CSS:
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.caption:hover {
text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}
fiddle: http://jsfiddle.net/vgKSh/1/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span{
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
You almost got it. Put text-decoration:underline; in main class only.
a {
text-decoration:none;
font-weight:bold;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
http://jsfiddle.net/vgKSh/9/
Forked and fixed here: http://jsfiddle.net/CtD8M/
Just have the specific span a set to text-decoration underline, rather than setting globally
Fiddle: http://jsfiddle.net/vgKSh/4/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span.main {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
a:hover span {
text-decoration:none;
}
a:hover .main{
text-decoration: underline;
}
Just as a style thing, I never use text-decoration but use border-bottom instead with a bit of padding.
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
Related
I have CSS made by me. I used it to make my nav link in green color. So I used a:visited. Then mouse over visited link won't make work hover properties. Please help me to make it green and red when hover. [sorry for my bad English]
CSS
#nav {
font-family:arial;
font-size:20px;
}
#nav a:link {
color:green;
text-decoration:none;
}
#nav a:hover {
color:red;
text-decoration:none;
}
#nav a:visited {
color:green;
}
#nav li:hover {
font-family:arial;
font-size:21px;
}
#nav li {
float:right;
margin: 5px;
}
#nav li#active {
font-family:arial;
font-color:red;
font-size:20px;
font-weight:bold;
}
#nav li#active:active {
font-color:red;
}
Learn about the cascade.
#nav a:hover and #nav a:visited are equally specific so the last one will override the first one.
Put the :hover rule after the :visited rule if you want it to overwrite the other way around.
I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li>Home</li>
<li>Our Products</li>
<li>Contact us</li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Replace .nav a:link with .nav li a
demo
.nav li a, .nav li a:visited {
/*here^^^*/
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
This is working fine now in the fiddle.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:visited{
background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a{
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
Your a:hover is covered by a:link or so on.
I guess, Since a:hover is of the same level with a:link, Css class at the lower position of the file has higher priority.
You can refer to this:
resolve css conflict
Here is the demo.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav-link {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav-link:hover,.nav-link:active {
background-color:#7A991A;
}
it's not a good practice to nest too many tags, give it a class.
use :link :visited :hover :active only when you want to rewrite the default styles.
css is cascading style sheet, order matters, put .nav-link first to normalize default styles and then overwritten default with :hover and :active.
!important is not a good practice here, just rearrange the order.
How can I get a list to flow to the side?
The best example ive seen of what I mean is on TruTower's VoIP Page. I'm trying to update my site from old html to new css but cant find the right code.
Prefer OL style (numbers) but UL is okay too.
You may want to look at this jsfiddle for an example to get you started.
http://jsfiddle.net/ashrobbins/SKzwU/
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
Updating Andrew's answer to suit your needs exactly:
Screenshot:
HTML:
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ol>
CSS:
ol {
margin:0;
padding:0;
position:absolute;
right:0px;
left:0px;
background: #eee;
}
li {
float:left;
padding-left:5px;
list-style-position: inside;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:inline-block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
li:hover{
color: #fff;
background-color:#666;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
FIDDLE
I'm trying to style my links and I have used this code for that:
.navtext {
position:absolute;
top:130px;
right:50px;
color:#ffffff;
font-size:20px;
z-index:3;
}
a.navtext:link {
color:#ffffff;
text-decoration:none;
}
a.navtext:hover {
color:#ffffff;
text-decoration:underline;
}
a.navtext:visited {
color:#ffffff;
text-decoration:none;
}
And here is my html:
<div class="navtext">
Home
About
School
Workshop
Contact
</div>
But they are staying as the default (Link: blue, underlined. No Hover. Visited: Purple, underlined.
a.navtext selects an <a> tag with the class "navtext".
You have no such <a> tag. Your <a> tags have no classes.
Try something like .navtext a instead. This selects an <a> tag within an element with the class "navtext".
.navtext a {
position:absolute;
top:130px;
right:50px;
color:#ffffff;
font-size:20px;
z-index:3;
}
.navtext a:link {
color:#ffffff;
text-decoration:none;
}
.navtext a:hover {
color:#ffffff;
text-decoration:underline;
}
.navtext a:visited {
color:#ffffff;
text-decoration:none;
}
change to
.navtext a:link { color:#ffffff;
text-decoration:none;
}
.navtext a:hover { color:#ffffff;
text-decoration:underline;
}
.navtext a:visited { color:#ffffff;
text-decoration:none;
}
I am trying to style hyperlinks: some must be white, and some others must be normal color. Here is what I have:
Register
a:link {
color:#FFF;
text-decoration:none;
}
a:hover {
color:#FFF;
text-decoration:underline;
}
a:visited {
color:#FFF;
text-decoration:none;
}
a:active {
color:#FFF;
text-decoration:none;
}
.normal a:hover{
color:#00F;
}
.normal a:link{
color:#00F;
}
.normal a:visited{
color:#00F;
}
.normal a:active{
color:#00F;
}
The normal links work fine. But when I use the class=normal, the link is still white. Why are the normal links taking precedence?
try define the class normal like this:
a.normal:hover
{
color:#00F;
}
a.normal:link
{
color:#00F;
}
a.normal:visited
{
color:#00F;
}
a.normal:active
{
color:#00F;
}