I'm trying to style all elements before hovered (from the left side).
Here is my code: jsFiddle
[CSS]:
a,
a:link,
a:hover,
a:visited {
/* ... */
color: #222;
}
a:hover,
a:hover ~ a {
color: #f00;
}
[HTML]:
text1|
text2|
text3|
All I've done is hovering from the right side (after hovered element), but I want it from the left.
A small change with the html and css can satisfy your requirement.
HTML:
<div>this/line/is/hovering/from/left/<div>
CSS:
a,
a:link,
a:hover,
a:visited,
div {
text-decoration: none;
font-size: 14pt;
background: #def;
color: #222;
}
div:hover a{
color: #f00;
}
a:hover ~ a {
color: #222;
}
jsFiddle
Do you want to style all elements differently?
you can select elements by nth-child selector.
Example:
a:nth-child(1){}
a:first-child+a{} or a:nth-child(1) + a /* Second Element */
a:last-child{} /*select last child, Works in ie8+, webkit, moz, o */
Related
Using html 5, I have an anchor element that contains block elements (e.g., p elements). I want the text within the p elements to change on hover—they don't.
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: red !important;
text-decoration: none;
}
<p>This changes color on hover.</p>
<a href="test.htm">
<p>This doesn't change color on hover.</p>
</a>
In my case, there are numerous elements within the anchor element and I can't change the CSS styles of those elements (e.g., I can't change the hover selector for p elements).
Thanks!
p won't inherit the hover color from an a tag around since it has its own color parameter (thanks to #BoltClock). But you can use a:hover, a:hover p { ... } as a selector to get what you want:
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover,
a:hover p
{
color: red !important;
text-decoration: none;
}
<p>This changes color on hover.</p>
<a href="test.htm">
<p>This also changes color on hover.</p>
</a>
Try this, this will change the hover selector for all the p element inside an anchor element
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: red !important;
text-decoration: none;
}
a p:hover{
color: red;
}
<p>This changes color on hover.</p>
<p>This doesn't change color on hover.</p>
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
I have the first letter selector working, to change the color of the first letter but when hovering that area the color matches with the background so it becomes invisible. This is the part of code working
.nav-menu li a:first-letter {color:#b5b503;}
.nav-menu li a:first-letter {font-weight:bold;}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
And this is the part where i guess i should add a .first-letter selector but cant find out how as it is already a hover selector in it
.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #b5b503;
color: #273664;
}
Yes, you can
Example CSS :
p:first-letter {
font-size: 120%;
}
p:hover:first-letter {
color: white;
}
HTML :
<p>Hello world</p>
Demo here : http://jsfiddle.net/LRFw8/1/
For your code, you would style this in .nav-menu li a:hover:first-letter
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
<div id="macrosectiontext">bla bla bla</div>
however it seems that it doesn't work. The div still inherits the global link style.
CSS work on inheritance, so you should only override the properties you want to change.
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for you to show your code is working (changed the hover color, just for demo)
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
I have the following HTML:
Bioshock 2<span> - Xbox 360 review</span>
I'd like to style the first part of the link in one way and the span in another, like this:
I've managed to do this, using the following CSS:
a {
text-decoration: none;
}
a span {
color: #c8c8c8;
}
a:link,
a:visited {
color: #787878;
}
a:hover,
a:active {
color: #fff;
background-color: #a10000;
}
However, it doesn't work as expected when I hover over it:
I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:
Any ideas how I could do this?
Try:
a:hover, a:active, a:hover span {
// ...
}
instead of:
a:hover, a:active {
// ...
}
Add this css code to it:
a span:hover {
color: #fff;
background-color: #a10000;
}
And here is the demonstration. :)