In my page I have two types of links, text links and image links.
for text links, I have defined following CSS rules:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
border-bottom: 2px solid #333300;
padding-bottom: 0.25em;
}
For text links everything is OK! but for image links, underline is added when mouse goes over image. I added this code to define new rule for image links:
.bodyimage a:link, a:visited, a:hover, a:active{
border: none;
padding-bottom: 0px;
}
but this rule overrides previous links and underline do not show for text links.
What should I do?
Sorry for my horrible English!
The problem is the border is assigned to the (hover) link. In order to remove that when there's an image present you would need a parent selector, which doesn't exist, i.e. you would need to be saying - if this link contains an img, remove the border from the parent a
parent selectors are often wished for, and are possible with JS :)
The way around it is to classify (add class to) one of the options to target either a:hover or a:hover img
kind of like this..
CSS:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
padding-bottom: 0.25em;
}
a img {border: 0;}
a.txt:hover, a.txt:active {
border-bottom: 2px solid #333300;
}
HTML:
<a class="txt" href="#">text link</a> - <img src="http://dummyimage.com/100x100/000/fff" alt="" width="100" height="100">
If you've less image links it might be better to classify the links which contain images..
Try putting this in your CSS:
img
{
border:0;
}
And remove your bodyimage class. If this doesn't work, try:
img
{
border:0 !important;
padding:0 !important;
}
Sorry if I'm missing something, but is there a reason you are using border-bottom to add an underline to the text? if you use text-decoration:underline, your text gets underlined while images don't. Isn't that what you want?
If you want this effect only when you are hovering over the link, you want:
a {
text-decoration:none;
color: #ccb771;
}
a:hover {
text-decoration:underline;
color: #333300;
}
a img {
border:none;
}
That should give you the colours you wanted, and underline the text while leaving the images underlined.
Related
Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF
add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}
(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}
Hi I'm trying to make a joomla site here, only one problem I can't seem to figure out. The color of my active link doesn't change, it has an image and a color, the image is in place as it should be, but the color doesn't change. Anyone an idea? here's the css:
a {
color: #ffffff;
text-decoration: none;
}
a:link, a:visited {color: #ffffff; text-decoration: none;}
a:focus, a:hover {
color: #e2231a;
text-decoration: none;
}
#links li.active {
color: #e2231a;
text-decoration: none;
background: url("../images/hover.png") bottom center no-repeat;
padding-bottom: 17px;
}
I know the active statement looks different then the rest, but this was the only way to get my image to show. Really stuck on this..
Used to this for a tag
#links li.active a {
// here style for your anchor link
}
If you want just the list elements within Links to change when active use this.
#links li:active a {color:#000;}
If you want all lists to be effected by this change use
li:active a {color:#000;}
If you want more than just the li elements to change ie ever single link on the site that is active to obey these rules then use the following
a:active {color:#000;}
Hope this helps you out.
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)
I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <li> and the color is set to white and li has no background, but in hover I want to set li background to white and links text color to black. The problem is that the width of <a> tags is not the same as <li> and when the mouse is over the part that is in <li> but not in <a> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?
#primary-menu ul li {
list-style-type: none;
float: left;
background-image: url('menu-sep.png');
background-repeat: no-repeat;
background-position: right;
}
#primary-menu li a:hover {
color: black;
}
#primary-menu li:hover {
background-color: white;
color: black;
}
#primary-menu li a {
color: white;
text-decoration: none;
padding-right: 8px;
margin-right: 8px;
width: 100%;
height: 23px;
}
`
Check your <li> styling. They probably have padding. Remove it and the anchors should occupy the entire available space. Also, change the margin on the <a> tag to padding. Padding counts as part of the tag (ie, hovering over the padding makes it trigger the :hover pseudoselector), while margins do not.
as you have written above that should be worked but you are saying that is not working then try by making class refered to only text like.
.liText
{
color:white;
}
.liText:hover
{
color:black;
}
hope this will work.
use class attribute with your tag.
like
<a class="liText"> // for single class
if you want to use two or more classes for one tag then use another class after giving space as i mentioned below.
<a class="firstClass SecClass ThirdClass">