|
CSS - A:hover Problems
Thanks for taking the time to read my question.
I am having problems with hover on my menu. Just before you mouse over the next button, the previous one lights up. I really don't know why. See: #MenuItemTop and #MenuItem I've attached my html, and my css. I have no where to post it. Thanks again. Brad Similar TutorialsOne is my fault for sure, the other maybe not. http://67-42-48-70.eugn.qwest.net/s...playseries2.php That's my site. If it's down, it basically some links that when hovered, display an image. The css is below. Code:
.seriesbox
{
height: auto;
width: auto;
}
.flashybox
{
/*float: left;*/
display: block;
height: auto;
width: auto;
}
.flashybox a span
{
display: none;
float: left;
color: yellow;
}
.flashybox a:hover span
{
display: inline;
float: none;
color: blue;
}
It works well in FF etc etc. But not IE6. Also there's a weird purple line at the bottom of the image. Like this Here is the relevant HTML for the rollover issue. Code: <div class="flashybox"> <b>G</b><br/><a href="addcharacter.php?series=Gankutsuou&addnewcharacter=false">Gankutsuou<br/> <span><img src="pictures/gankutsuou.jpg" ></span></a> <br/></div> Any ideas on what I could do? i have an icon on the site that users can place their mouse cursor over and a popup appears with helpful info. however on a friends machine today i found that the popup appears out of place....is thre a way that i can place the popup statically in one place on any machine... here is the code Code:
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: absolute; top: 270px; left: 705px; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
an example of this can been seen here any help would be helpful thanks RF Hello, I am designing a web page and I am having problems with a hover effect in IE6. The page is located at http://www.backontrack.nu/egusin/layout.php and if you hover over the menu items using Firefox (or any other real browser) you will see the hover effect. If you try doing this in IE6 there won't be any hover. Is there some obvious way of fixing this that I'm missing? Another thing, I would like to center the page. I can do this by adding margin: 0 auto; to the container class but this doesn't work in IE6. I know I could do the centering with a wrapper and some negative margins but I'd rather avoid that if at all possible. The odd thing someone at http://www.xs4all.nl/~peterned/examples/csslayout1.html is using the technique I tried for centering and it seems to work for him, even in IE6. Thanks in advance! /Robert Hey all I'm new here, (and I'll be honest) mainly because I heard this is a good place to get help. My site is nateandjong.com (a joint blog between me, "jong" and a friend "nate"). If you view the page, you will see that the rollovers for buttons in the navigational bar only occur when the mouse points to the top half of the button. When the bottom half is clicked nothing happens. Also, when the button is clicked, the dotted outline surrounds the entire image as it should. What's the deal? The css style governing one of the buttons is: #mainButton{ display:block; width:80px; height:30px; background: url('images/main_btn.jpg') 0 0 no-repeat; } #mainButton:hover{ background-position:0 -30px; } The html displaying the buttons is as follows: <div id="navbar"> <div id="navbuttons"> <table border=0 cellpadding=0 cellspacing=0><tr> <td><a id="mainButton" href="/"></a></td> <td><a id="aboutButton" href="/about/"></a></td> <td><a id="faqButton" href="/"></a></td> <td><a id="archiveButton" href="/archive"></a></td> <td><a id="rssButton" href="/"></a></td> <td><a id="contactButton" href="/"></a></td> </tr></table> </div> </div> does anybody have any ideas? other information: I am using Wordpress 2.1 and my theme is worked off of the generic kubrick theme. THANKS in advance. I have been searching and googling this problem for hours to no avail. Hi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect). I've got two problems in IE that can be viewed he http://www.windrivers-gsp.com/test/index.php CSS: Code:
@charset "utf-8";
/* CSS Document */
/* Document Formatting */
html { width:100%;}
body, tr, th, td, p { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#000000;
margin:0px;
padding:0px;
}
#navigation { position:relative;
background:url(design/menubar.gif) #009933;
background-repeat:repeat-x;
width:100%;
height:30px;
text-align:center;
display:block;
}
#nav2 { position:absolute;
left:50%;
width:628px;
margin-left:-314px;
}
#container { position:relative;
max-width:1400px;
min-height:400px;
overflow:visible;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #666666;
padding:15px 10px 10px 10px;
z-index:2;
}
#content { font-size: 1em;
margin-right:36%;
overflow: visible;
background: #FFF;
text-align: left;
height: auto;
padding-right:10px;
}
#rightpane { font-size: 1em;
float:right;
margin-top:0;
width:35%;
overflow: visible;
text-align: left;
height: auto;
}
#fixcont {width:100%;float:left}
/* PIE/Aslett Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* New Navigation Menu Styling */
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}
#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}
#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}
#menu h2:hover {background-position: 0 30px;}
#menu a {color: #000; text-decoration: none;}
#menu ul ul a {font-size:.8em; background-color:#a4906d;}
#menu ul ul a:hover {background-color:#CCCCCC;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; z-index: 10;}
div#menu ul ul {display: none;}
div#menu ul li:hover ul {display: block;}
HTML: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css" media="all">
body { behavior: url(csshover.htc); font-size: 100%;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 30px;}
#menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="title" content="Test Menu" />
<meta name="Publication_Date" content="09/07" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="2 weeks" />
</head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Two</a></h2>
<ul>
<li><a href="index.php">Page 2.1</a></li>
<li><a href="index.php">Page 2.2</a></li>
<li><a href="index.php">Page 2.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="index.php">Page Three</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Four</a></h2>
<ul>
<li><a href="index.php">Link 1</a></li>
<li><a href="index.php">Link 2</a></li>
<li><a href="index.php">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>
Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right. In FF everything looks good, of course. Any ideas? I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
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! I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
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 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 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; } Hi, I have found a nice feature on this website; click here When you mouse over grey - orange images another div comes out. What this is called? Is there any example code that I can work on? Thanks. 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 2 divs div1 and div2 there is an image in div2 and there is a link in div1, by default the image in div2 is hidden and i have used #div2 img{ visibility: hidden; // also i tried display: none; } when i move the mouse over the link in div1 i want the image in div2 to appear following is my code #div1 a:hover #div2 img1{ visibility: hidden; or display: none; } the image in div2 is not appearing without using javascript or jquery can this simple effect be done by using css code can someone tell me the correct syntax to show the image please advice. thanks 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. 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 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 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 |
|||||||