I created a list and each li element has a background image which changes when hovering over the li. Additionally the li should contain a link to another webpage.
I assume its bad html to write <li></li> - We should avoid that, right?
But how can I create a link inside the li element which links to another page and additionally the CSS which changes the background picture is still active?
HTML:
<li class="list_skybox"></li>
CSS:
.list_skybox {
background: url('../img/skybox_unactive.png') no-repeat;
}
.list_skybox:hover {
background: url('../img/skybox.png') no-repeat;
}
Thanks!
Related
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:
The CSS styles are the following one:
#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p
How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.
Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.
The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.
Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
Featured
</li>
You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.
Hope this helps you.
Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):
Your HTML Markup
<ul class="nav">
<li class="nav-one current">Services</li>
<li class="nav-two">Clients</li>
</ul>
NOTE: class='nav-one current' on selected LI element instead of A element
Your NEW CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There is an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Here's a sample of what i did in Chrome and the result:
NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.
NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.
Our designer created a navigation that visually looks like this:
Navigation Bar
The HTML structure of which is:
<ul>
<li class="first">Home</li>
<li>Schools</li>
<li>Scores</li>
<li>Sports</li>
<li>Blogs</li>
<li>Podcasts</li>
<li class="last">Forums</li>
</ul>
I can't figure out if there's a way to make this so that when I mouse-over, let's say 'Sports', that both the left and right arrow image would change colors to the darker red. Is there a way to do this?
This is my CSS so far, but it only changes the arrow right of the link:
#mainNav ul li{
float: left;
background-color: #ed1c24;
padding: 7px;
padding-right: 21px;
background-image: url('/images/red_arrow.png');
background-repeat: no-repeat;
background-position: right;
}
#mainNav ul li.first{
padding-left: 14px;
}
#mainNav ul li a{
text-decoration: none;
color: #FFF;
}
#mainNav ul li:hover{
background-color: #d5171f;
background-image: url('/images/red_arrow2.gif');
}
You'll want something like this: http://jsfiddle.net/2xXQC/
Notice specifically the negative margin-left on each list item that causes them to overlap. The image you will need is something like this:
_____
\ \
/____/
Note to self: Seriously brush up on ASCII art skillz
Except the first. Do note however which anchor gets selected when the cursor hovers. HTML elements are always rectangular, so there's no way you can get the hit area to form the shape of the arrow.
Just make the hover image have both arrows in one image, then position it so it covers both arrows.
I'd be willing to bet that the background image for each list item only has a right arrow.
Using Css, you're only affecting the background image that you're actually hovering over.
If you use javascript (or jquery) for this (onHover), you'll have access to an onHover "event", within which you'll be able to affect anything else on the page, not just the image you're hovering over. In that case, you'll be wanting to swap the image you're hovering over, as well as the one to the left of it.
If your red_arrow.png and red_arrow2.gif have both arrows you may be able to mess around with z-index, but it's going to require a lot tweaking to get everything lined up properly.
You are probably better of using a css sprite and fine tuning the hover position in css.
Check link text for some good tutorials and ideas.
You don't have to use javascript. CSS Sprites get the job done for mouseovers. Here is a good article:
http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/
Here is that technique in action:
http://www.rackspace.com/apps
EDIT: I see the problem. You need to do BOTH arrows. But you can still do this with CSS, just increase the z-index for the hover states (You'll need to have your sprite include both the left and right arrows):
a:hover {
background-position: 0 40px;
z-index: 10;
}