|
CSS - How To Position A Hover Pop Up For Links?
Hi. I created this test page and right now if you mouse over the link it will have a pop up details but that box is not on the right position.
How can I make that red box show up right below the link? Also is it possible to have the pop up box show up near the mouse pointer? Let's it the link is very long and when it's mouse over but moving to the left. Can I have that box follow the mouse pointer? Hope you know what I mean? Also if my links are at the end of the line in the browser(near the scroll-up-down bar) and my data inside the box contains multiple lines how can I make the content appearance won't change? Sorry if I didn't explain that clear but I really appreciate if anyone can help me on this. Thank you!!! Here's the link: http://yourbestproduct.com/test2.html Please view the source code on that link!!! Similar TutorialsHi Guys, Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!) The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too! Site is fine in Firefox, see here However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received! My style sheet is here Again, any pointers would be much appreciated Best regards Jon P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions? I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS: Code: #thumbcontainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
padding: 10px 10px 0px 0px;
width: 840px;
background-color: #000000;
}
a img {
border: none;
margin: 4px 4px 10px 4px;
}
a img: link {
border: 1px solid #000000;
}
a img: visited {
border: 1px solid #000000;
}
a img:hover {
border: 1px solid #e5cb43;
}
a img: active {
border: 1px solid #000000;
}
ul.content {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #000000;
width: 850px;
text-align: center;
}
li.content {
margin: 0px;
padding: 0px;
list-style-type:none;
}
What are my options? Thanks in advance! Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html>
Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
Hi everybody I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around. I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other. I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant. I was wondering if someone out there has a better solution to this? Thanks in advance. Good day, I am a newbie, both to CSS and to these forums. I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997. I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2. Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work. The page I am working with is at beverlyfoundation . org / library / index . html /* THE BASICS */ body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #eaf5ff; margin: 0px; padding: 0px; background-color: #c2d8ec; } p { margin-top: 0px; margin-right: 0px; margin-bottom: 14px; margin-left: 0px; } img { border: none; } a:link, a:visited { text-decoration: none; color: #EAF5FF; } a:active, a:hover { text-decoration: underline; color: #E51322; } /* HEADERS */ h1, h2, h3 { font-family: Helvetica, Arial, Verdana, sans-serif; margin: 0px 0px 14px; } h1 { font-size: 220%; text-align: right; font-style: italic; } h2 { font-size: 140%; } ul { list-style-position: outside; list-style-type: square; } /* TOP COLORED LINKS */ .navcells { text-align: center; vertical-align: middle; padding: 2px; font-weight: bold; font-size: 11px; } #navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; } #navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; } /* LAYOUT */ #header { margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(../images/header_gradient01_bg.jpg); background-repeat: repeat-x; background-position: left top; } #content { padding: 10px 20px 10px 10px; background-color: #0060BE; text-align: left; vertical-align: top; font-size: 12px; } #rightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #splashrightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; } #rightcolumn img { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } #rightcolumn p { margin-top: 0px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; } #rightcolumn h1 { font-size: 180%; text-align: center; font-style: italic; } #rightcolumn h2 { margin-top: 21px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; text-align: center; } #rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; } #rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; } #threecolumn { padding: 10px; width: 220px; text-align: left; vertical-align: top; font-size: 12px; } #threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; } #threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; } #footer { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; line-height: 14px; } #footer a { color: #EAF5FF; text-decoration: none; } #address { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; border-left-width: 1px; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #address a { color: #EAF5FF; text-decoration: underline; } #address h2 { margin: 0px; } .threecolumns { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; } .resourcestore p { margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; } .gradientrow { background-image: url(../images/footer_bg01.jpg); } .copyright { font-size: 10px; } .resourcestore { padding: 10px; } I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Hi guys, Was wondering if you could tell me where I'm going wrong with this. Basically I have used the class "WhiteBoldLinks" on some text BUT when the mouse goes over the link I cant get the underline and text colour to work which is assigned to the class "#WhiteBoldLinks a:hover" . How do I use this? Or have I coded it wrong? PHP Code: .WhiteBoldLinks { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #FFFFFF; text-decoration: none; } #WhiteBoldLinks a:hover { text-decoration: underline; color: #FF0000; } I know that td:hover isn't supported by all browsers but it is displaying some quirky behavior: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#level0 table {
border-spacing: 0;
border-collapse: collapse; } /* end #level0 table */
#level0 table td { padding: 0; }
#level0 #links_table {
text-align: right;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
height: 242px;
width: 265px; } /* end #level0 #links_table */
#level0 #links_table td {
border-top: 1px solid #f1f1f1;
border-right: 1px solid #000000;
border-bottom: 1px solid #f1f1f1; } /* end #level0 #links_table td */
#level0 #links_table td:hover {
border: 1px solid #000000;
border-right: 0; } /* end #level0 #links_table td:hover */
#level0 #links_table a { padding-right: 1em; }
#level0 #rotating_image img {
vertical-align: top;
border: 1px solid #000000;
border-left: 0; } /* end #level0 #rotating_image */
</style>
</head>
<body>
<div id="level0">
<table id="main_table">
<tr>
<td>
<table id="links_table">
<tr><td><a href="#">Link 1</a></td></tr>
<tr><td><a href="#">Link 2</a></td></tr>
<tr><td><a href="#">Link 3</a></td></tr>
<tr><td><a href="#">Link 4</a></td></tr>
<tr><td><a href="#">Link 5</a></td></tr>
<tr><td><a href="#">Link 6</a></td></tr>
<tr><td><a href="#">Link 7</a></td></tr>
<tr><td><a href="#">Link 8</a></td></tr>
</table>
</td>
<td id="rotating_image"><img src="my_image.gif" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
When I hover over the first cell, the top and bottom borders turns black but not the left, and all the right borders disappear. When I hover over the other cells, only the bottom border turns black. What I am trying to accomplish is when a table cell is moused over, the top, bottom, and left border of that cell turns from gray to black and the right border which is currently black turns white. I have the following css Code: #navigation li {
display: inline;
background: url(Images/greenbg.gif) repeat-x center top;
text-align: center;
padding: 0;
margin-right: 4px;
float: left;
}
for the following html Code: <div id="navigation"> <ul> <li><a href=""><span>Menu1</span></a></li> <li><a href=""><span>Menu2</span></a></li> <li><a href=""><span>Menu3</span></a></li> <li><a href=""><span>Menu4</span></a></li> <li><a href=""><span>Menu5</span></a></li> </ul> </div> <br style="clear: both" /> and I can't figure out how to get the background to change when I hover. Anyone have any ideas? I tried this to no avail Code: #navigation a:hover li {
display: inline;
background: url(Images/greenbghover.gif) repeat-x center top;
text-align: center;
padding: 0;
margin-right: 4px;
float: left;
}
I want to change the color of an <a> when a list element is hovered over, using CSS. Is this possible? Or do I need to resort to Javascript? Code:
<style>
a { color: red; }
#menu ul li:hover { background: red; color: white; }
</style>
<div id="menu">
<ul>
<li><a href="home.html">Home</li>
</ul>
I can do a change to: #menu ul li:hover, #menu ul a:hover { background: red; color: white; } but the anchor won't change color on the li:hover, so it looks red on red. I have two images, A and B. When I hover over image A, B appears over A, where B is at 25% opacity. If I wanted to make B appear after A, I would use this: Code: .imageA:hover:after{
content: url("images/imageB.jpg");
}
or before.. Code: .imageA:hover:before{
content: url("images/imageB.jpg");
}
How do I make B appear on top of A or underneath it? Thanks, Andy Thanks for taking the time to read my question. This works in FF but not IE6. What do I need to change to make it work I have borders around my images which are links and I want the border color to change on hover HTML Code: <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> CSS for container Code:
img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}
CSS for hover Code: <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> Thanks, Brad http://www.knowledge2work.com/testing/test.htm is a link to a menu that I have created. Essentially what I want to happen is that the mouseover on the submenu changes the background color and the text color as well. I have done this using td:hover and ids and it works just fine in Firefox but not at all in IE. Why is this? I know this has been discussed loads. And I have read a tonne of articles telling people it cannot be done in pure CSS. But I wanted a little clarification. I want a hover: over a <tr>. Now Im not fussed if it doesn't work in IE5/6 even 7 (although obviously it would be nice!) its a little feature to help users. My app is internal, so as long as the CSS doesn't break the page, then IE users just wont get the hover, while others will. This is what I have: .result_lines{ background-color:#EAEAEA; } .result_lines tr:hover{ background-color:#666666; color:#FFFFFF; } Now, having not done this, I wasn't even sure if the order of my syntax was correct, so a little direction would be perfect. Note: I don't want to use JS. I don't know is it done before or not but i made it ,, i got rid of the onmouseover:crab tags but i think if you announce it as harmless I have use it again because I'll to write three times more code to get what i want with that hover thing. both functional in ie and ff css Code: .ortadiv:link {background-color:#EFEFEF;}
* html .ortadiv {background-color:#EFEFEF;} /*hack*/
.ortadiv:hover {background-color:white; cursor:default}
html -(my code looks like that) Code: <a class="ortadiv" href="#"><span><h5></h5></span></a> (it doesn't validates !) my main concern is about my headers , because when i use my css-hack-hover they becomes links with "#" . Is it affects search-engine things ? edit: I decided to not to use it because of my validating concerns hey there i was wondering why on hover the .indexThumbDiv dosnt display as a block in IE6 but in IE7 and firefox it does. head: PHP Code: .indexThumbDiv{display:none;} a.indexThumbA:hover .indexThumbDiv{display:block;} body: PHP Code: <a class="indexThumbA" href="link"> span class="indexThumbDiv"></span> <img src="link" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Hi there, I would like for the background of a text link to change colour when the mouse hovers over the text... no problem a:hover {background:#72b83c} However I would like to STOP the background of an image doing the same thing.... this I am having trouble with. I've tried a:hover img {background:none} a:hover img {background:none!important} But it doesn't seem to work (the background still changes behind the image (showing the colour around the left and bottom of the image). Can anyone offer any suggestions? Paul |
|||||||