CSS - On Hover Of List Item Background And Link Colour Change
I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.
Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; } But it doesn't change the links text colour. Similar TutorialsI've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover { color: #1e5ebd; background:url("images/drawer4b.jpg") no-repeat; background-repeat:no-repeat; background-position: 0px -10px; color:#FF0000; /* how do I do something like this body.top { background-image: url(images/tabtool.jpg) ; } */ } Just to be complete, and in case there is something in here that you might need, here is the full css file: Code: body.top { padding-left: 11em; font-family: Fantasy, "Times New Roman", Times, serif; font-size:15px; color: #000000; /*background-image: url(images/tab3.jpg) ; */ background-position: 210px 10px; background-repeat:no-repeat; background-color: #000000; margin-left:5cm; } body.top { background-image: url(images/tab3.jpg) ; } ul.navbar { color: #000000; list-style-type: none; position: absolute; display:block; float:left; left: 1em; } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { text-align:center; /* vertical-align:100px; */ background: #000000; border-right: 1em solid black; } ul.navbar a { text-decoration: none ; top:10%; height:4em; } a:link { color: white } a:visited { color: white } #navlist { font-family:Arial, Helvetica, sans-serif; font-size:.8em; font-weight:bold; list-style:none; } #navlist a { display:block; width:144px; height:137px; color:#fff; text-decoration:none; background:url("images/drawer4.jpg") no-repeat; background-repeat:no-repeat; background-position: 0px -10px; } #navlist a:hover { color: #1e5ebd; background:url("images/drawer4b.jpg") no-repeat; background-repeat:no-repeat; background-position: 0px -10px; color:#FF0000; /* how do I do something like this body.top { background-image: url(images/tabtool.jpg) ; } */ } #navlist a:active { background:url("images/drawer4b.jpg") no-repeat; background-repeat:no-repeat; background-position: 0px -10px; color:#FFC741; } I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply: .postbitleft { background-color: #0B198C; } (aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript? Regards, James Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code: /* * Page Stylesheet */ body { font-family: Arial, Helvetica, sans-serif; background-color: #eaeaea; border:0; margin:0; padding:0; height: 100%; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } #container { margin-left: auto; margin-right: auto; min-height: 100%; width: 936px; } * html #container { height: 100%; } #content { float:left; position: relative; height: 528px; width: 936px; z-index: 0; } .miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 { position: absolute; float: left; display: block; width: 312px; height: 176px; } .miniscreen1 { top: 0; left: 0; } .miniscreen2 { top:0; left: 312px; } .miniscreen3 { top: 0; left: 624px; } .miniscreen4 { left: 0; top:176px; } .miniscreen5 { left: 312px; top:176px; } .miniscreen6 { left: 624px; top:176px; } .miniscreen7 { left: 0; top:352px; } .miniscreen8 { left: 312px; top:352px; } .miniscreen9 { left: 624px; top:352px; } .info { height: 30px; top:3px; left: 40px; width: 265px; float: left; position: absolute; } .infobar { left:0px; position: absolute; top: 140px; width: 312px; height: 36px; outline: none; color:#000; background: url("data/infobar.png") no-repeat 0 0; z-index: 650; } .infobar:hover { background-position: 0 -36px; outline: none; color:#fff; } #infobar span { display: none; outline: none; } .clip_title { outline: none; font-size: 85%; font-weight: 700; vertical-align: top; text-align: left; } .clip_sub { outline: none; height: 13px; font-size: 80%; line-height: 13px; font-weight: 700; vertical-align: top; text-align: left; } And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi there, I have a text field which I would like to change colour on hover. Any ideas how I would do this? I tried using a class with a:hover but it didn't work. Thanks! Can anyone tell me how to change the background colour of all tooltip texts on a web page? Cheers. I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer { width: 200px; margin-top:150px; } #navcontainer ul#navlist { width:200px; clear:left; text-align:left; margin-left:0; padding-left:0; list-style:none; font-size: 12px; font-weight:bold; line-height: 14px; } #navcontainer ul#navlist li { margin-left:0; padding: 0px; display: block; list-style:none; border-bottom: 1px solid gray; } #navcontainer ul#navlist li.last { border-right: 0; background:none; } a.linkText { padding: 10px; display: block; color : #444444; font-family : arial; font-size : 11px; font-weight : bold; text-decoration : none; height:25px; } a.linkText:link { color : Aqua; /* you can define other styles if necessary */ } a.linkText:visited { color : Maroon; /* you can define other styles if necessary */ } a.linkText:hover { color : Blue; } </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li><a class="linkText" href="#">Item One</a></li> <li><a class="linkText" href="#">Item two</a></li> <li><a class="linkText" href="#">Item three</a></li> <li><a class="linkText" href="#">Item four</a></li> <li><a class="linkText" href="#">Item five</a></li> </ul> </div> The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad I have these two areas. Code: .MenuItem { color:#FFFFFF; font-size:12px; background-color:#CC0000; font-weight:bold; height:18px; padding-top:5px; padding-bottom:5px; border-top:0px solid #FF0000; border-left:2px solid #FF0000; border-bottom:2px solid #FF0000; border-right:2px solid #FF0000; } .MenuItemTop { color:#FFFFFF; font-size:12px; background-color:#CC0000; font-weight:bold; height:18px; padding-top:5px; padding-bottom:5px; border-top:2px solid #FF0000; border-left:2px solid #FF0000; border-bottom:2px solid #FF0000; border-right:2px solid #FF0000; } which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code: .MenuItemTop a:hover, .MenuItem a:hover { color:#FFFFFF; text-decoration:underline; font-size:12px; background-color:#000000; } Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad Nevermind, fixed. Changed Pixels into Percentages. Delete thread. Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot. I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail. Here is the HTML I am using for this particular container: <div id="fivels"> <div id="classone"> <a class="home" href="#">Home</a> <a class="gallery" href="#">Gallery</a> <a class="about" href="#">About</a> <a class="help" href="#">Help</a> <a class="partner" href="#">Partner</a> </div> </div> And here is my CSS: #fivels { margin-left: auto; margin-right: auto; height: 150px; width: 800px; background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */ } #classone { margin-left: auto; margin-right: auto; width: 800px; text-align: center; } #classone a:link { color: white; text-decoration: none; background-color: black; filter: alpha(opacity=20); } #classone a:visited { color: white; text-decoration: none; background color: black; filter: alpha(opacity=20); } #classone a:hover { color: white; text-decoration: none; background-color: white; filter: alpha(opacity=20); } .home { padding: 3.2em; } .gallery { padding: 3.2em; } .about { padding: 3.2em; } .help { padding: 3.2em; } .partner { padding: 3.2em; } Also, on a side note, is using the padding attribute the most efficient way of seperating the links? Trying to get my td backgrounds and my links to change colors when you roll over into the td. However only both change when you roll over the link within the td. If you roll over just the td, it changes, but I need both the link color and the bg color to change when you roll over the td. Here's what I'm going for, the category set up I mean: http://www.colemancampingstore.com/link-hiking.html Here's my CSS etc. PHP Code: td:hover.cats { background-color: #446644; color:white; } a:link.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } a:visited.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; color: #000; } a:hover.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a:active.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } echo "<td class='cats' ><center>"; echo "<b><a href='links.php?cat=".$myrow['cat']."' class='catlink'>".$myrow['cat']." </a></b><br>"; echo "</center></td>"; } Is there a way to achieve this effect without using javascript and junk? I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{ background-color:#d9f7ff; color: #71808F; } Thanks! cae Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer Hello, I'm trying to create an list menu like the one in attached image and I have 2 problems. 1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok) 2. I need to align the text on the bottom of the list like inattached image. Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php Anyone knows what I must do ? 10x I'd like to be able to have different hover colours for different table rows. I have a general hover colour for the whole page and I'd like to have a different hover colour for the table rows. In the head I have a:hover { color: green } a.white:hover { color: white } So by hand I can insert the class="white" to each individual cell as part of the link but what if I wanted a whole row to hover white? How would I code this or is there still no way to do it? |