|
CSS - Make Link Glow I Put Mouse Over It
can some tell me why dis code doesn;t work?
Code:
div.fLeft {float:left; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; filter:glow(color=red);}
div.fLeft:active {
color: #000066; filter:glow(color=blue)
}
Similar TutorialsHey, I was trying to play with filters and found that I can't use glow with FireFox. Is there one that doesn't use images to resemble a glow? That would be great. I have googled but cannot find the way. If not it's all good, it was something that is minor. Chad So I have a picture gallery/menu thing and I'm TRYING to make the list item actually clickable but I don't know how. It's probably easier to show you so on this page, I want the graphic that says 'click me!' to actually be a working link like you would expect from a menu item. http://www.thespinzone.com/temp/devcss.php Of course you can view the source to see the code but... The relevant css is: Code:
#container {position:relative; width:204px; height:530px; margin:0px auto 0 auto; border:0px solid #aaa;
background-image:url(portmenubg1.jpg) left no-repeat;}
#container ul {width:204px; height:530px; padding:0; margin:0px; list-style-type:none; float:right;}
#container li {float:left;}
#container a.gallery span {position:absolute; width:1px; height:1px; top:1px; left:5px; overflow:hidden;
background:#4C697B;}
container a.slideb, #container a.slideb:visited {background:url(pb.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:34px 0px 24px 42px; text-align:left; cursor:default;}
#container a.slidec, #container a.slidec:visited {background:url(pc.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:20px 2px 22px 4px; text-align:left; cursor:default;}
#container a.slided, #container a.slided:visited {background:url(pd.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 80px; text-align:left; cursor:default;}
#container a.slidee, #container a.slidee:visited {background:url(pe.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 8px; text-align:left; cursor:default;}
#container a.slidef, #container a.slidef:visited {background:url(pf.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 46px; text-align:left; cursor:default;}
#container a.gallery,slideb:hover {height:54px; width:120px;}
#container a.slideb:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidec:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slided:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidee:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidef:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.gallery:hover span {position:absolute; width:300px; height:200px; top:10px; left:204px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #000; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
and the html is: Code: <div id="container"> <ul> <li><a class="gallery slideb" href="#nogo"><span><img src="pb1.jpg" alt="clickme" title="B" /></span></a></li> <li><a class="gallery slidec" href="#nogo"><span><img src="pc2.jpg" alt="clickme" title="C" /></span></a></li> <li><a class="gallery slided" href="#nogo"><span><img src="pd1.jpg" alt="clickme" title="D" /></span></a></li> <li><a class="gallery slidee" href="#nogo"><span><img src="pe1.jpg" alt="clickme" title="E" /></span></a></li> <li><a class="gallery slidef" href="#nogo"><span><img src="pf1.jpg" alt="clickme" title="F" /></span></a></li> </ul> </div> I have the following HTML and I am wanting to make the link larger. Code: <div id="user4"> <div class="moduletable"> <ul class="menu"> <li class="item53"><a href="http://rss.com"><img alt="rss" src="/joomla/images/stories/rss-64x64.png"></a> </ul> </div> </div> I have tried the following CSS: Code:
.moduletable li a{
height:50px;
}
I'm trying to get the cells on the left menu to highlight AND become a link on mouse-over. The problem is when I set "a" to display:block; the link text floats to the top of the cell. What I want is: td:hover = link I can click or tr:hover = link I can click without my fancy text alignments going awry. First the CSS then the HTML: body { color: #000000; } body.one { color: #000000; background: #FFFFFF; background-repeat:no-repeat; background-attachment:scroll; background-position:top center; } table.housing { width: 90%; margin: auto; margin-top: 60px; margin-bottom: 200px; border-style: groove; border-width: 0px; border-color: #000000; } td.left { width: 10%; } td.right { width: 90%; } table.mainmenu { margin: 20px 10px 20px 20px; width: 205px; height: 300px; border-spacing: 20px 20px; background-color: rgba(184,183,151,0.5); /*#b8b797; CCCC66; FFFFA0;*/ border-style: groove; border-width: 2px; border-color: #000000; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; float:left; } td.mainmenu { height: 60px; border-style: solid; border-width: 1px 0px 1px 0px; border-color: #000000; font: bold 1.1em Georgia; font-variant: small-caps; background-color: rgba(255,255,255,0.7); /*#FFFFFF; #FFEECC;*/ } /*td.extra { height: 20%; border-style: none; border-color: #FFFFFF; background-color: #F1FFCC; }*/ table.text { width: 100%; margin: 20px 20px 20px 10px; border-spacing: 20px 20px; height: 600px; background-color: rgba(184,183,151,0.5); /*#b8b797;*/ border-style: groove; border-width: 2px; border-color: #000000; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } td.text { border-style: solid; border-width: 1px 1px 1px 1px; border-color: #000000; background-color: #FFFFFF; /*rgba(255,255,255,0.9);*/ padding: 10px 10px 10px 10px; } a { color: #000000; text-decoration:none; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #000099; background-color: #b8b797;} a:active { color: #000000; } The HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="generator" CONTENT=""> <META NAME="author" CONTENT=""> <META NAME="description" CONTENT=""> <META NAME="keywords" CONTENT=""> <LINK REL="stylesheet" TYPE="text/css" HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/test.css"> </HEAD> <BODY class="one"> <table class="housing" border="0"> <tr> <td class="left" align="left" valign="top"> <table class="mainmenu"> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/bcconstruction.htm">Home</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Portfolio.htm">Portfolio</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Ideas.htm">Ideas And Information</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Contact.htm">Contact</A></td> </tr> </table> </td> <td class="right"> <table class="text"> <TR> <TD class="text" align="center" valign="top"> </td> </tr> </table> </td> </table> </BODY> </HTML> How can I make this using his image??? charmingwp com / exprecious-wordpress-theme/ The demo and download box?? The picture is Quote: /wp-content/themes/expose/images/preview gif Hi all, I have a very simple question.. my mouseover is ALMOST working properly. However when you mouse over the box colour changes, but the text only changes when you are DIRECTLY over the text. How can I fix this? Check the communities drop down for an example of my problem. Here is my temp site URL: edit: I can't post links yet?!?! PM me for link Thanks! hellow i want help in a simple code can u tell me how do it code for this . when mouse become over link it will have underline while not over dosen't have. thanks I've been using on MouseOver and such for ages, however I've seen other means of detecting and acting on mouseovers/mouseouts and such. I need to learn how to do this using <div> or <td> elements - I'm not prepared to use <ul> and <li>, I don't understand the concept yet. From what I've seen, I should be able to have something along the lines of #button.over {attributes}. I do not know the details, but in effect, the element's CSS attributes would be automatically changed when a mouseover is detected and an 'over' class is supplied. Let me know if you need any further information - otherwise, thanks in advance for any insight you may provide. The web page that I am having a problem editing is: www dot postalstampssale dot com We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner. We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page. However, we can not figure out how to attach the proper coding to each image. The current coding is: <img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right"> <img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right"> <img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right"> Can someone please suggest how to modify the above coding. Thank you in advance. Thanks for taking the time to read my question. When the mouse hovers over a link I would like the background of the link to change color and for a border to show up around the area. here is what I have. It doesn't work. any suggestion? Code:
#menu a:hover {
/*color:#005c00;*/
font-weight: bold;
font-size: 12px;
width: 114;
background-color: green;
border-top: thin white;
border-left: thin white;
border-right: thin black;
border-bottom: thin black;
}
Thanks, Brad Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris I'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction? Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it. link: http://www.net-force.com/hotest/a1.html any suggestions how to fix it so it displays properly in IE? thx! Is it possible to have a CSS popup (a:hover) be positioned with regard to the mouse pointer position similar to a tooltip? i wanted to get the hover to cover the entire box around the a-link ,but it dosent work . if anyone can see my errors, please help! PHP Code: <div align="center" id="topNav"> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/company/index.php">Company</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/services/index.php">Services</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/resellers/index.php">Resellers</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/dedicated_servers/index.php">Servers</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/network/index.php">Network</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/support/index.php">Support</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/billing/index.php">Billing</a></span> </div> and the css PHP Code: #topNav { width: 750; height: 22px; margin-bottom: 1px; } /* Navigation */ .link { text-align: center; background-color: #444444; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; list-style: none; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } .link2 { text-align: center; background-color: #CC0033; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; list-style: none; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } .link a { text-align: center; background-color: #444444; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; width: 24px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } a.link:hover{ text-decoration: underline; color: #FFFFFF; background-color: #CC0033; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } /* Navigation */ i'm trying to make a site with only css, other than this little problem its working. Hi there, I have not done any html/CSS in a LONG time and have just got back into it. I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item. An example is here (oops, I can't post a URL) 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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/carpet.gif);
width:100%;
margin: 0px;
}
#wrapper {
position: relative;
margin: auto;
width:840px;
top: 20px;
height: 920px;
}
#index3-03_ {
position:absolute;
left:5px;
top:45px;
width:840px;
height:263px;
background-image: url(images/thinslice.png);
background-repeat: no-repeat;
z-index: 2;
background-position: -66px -142px;
}
#navbar {
position: absolute;
top: 31px;
right: 0px;
margin: 0;
padding: 0;
width: 780px;
left: 38px;
height: 37px;
}
#navbar li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
}
#navbar li a {
display: block;
text-decoration: none;
list-style-type: none;
list-style: unordered;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
color: #363795;
text-align: center;
}
#navbar li a:hover {
color: #B00D46;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position:absolute;
display: block;
left:-42px;
top:-1px;
width:840px;
margin: 0;
background-repeat: no-repeat;
float: left;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
z-index: 5;
clear: none;
background-image: url(images/fatslice.png);
background-position: -62px -281px;
height: 500px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
padding-left: 25px;
padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #363795;
position: relative;
left: 125px;
top: 25px;
}
#navbar li li a:hover {
color: #B00D46;
text-align: left;
position: relative;
left: 125px;
top: 25px;
}
#foobar1 {
position: absolute;
left: 62px;
top: 1px;
clear: both;
}
#foobar2 {
position: absolute;
left: 149px;
top: 1px;
clear: both;
}
#foobar3 {
position: absolute;
left: 32px;
top: 1px;
clear: both;
}
-->
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="index3-03_">
<ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
<li><a href="usage.html" target="_self">THIS IS BROKEN</a>
<ul>
<span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
<span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
<span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
<li><a href="parents.html" target="_self">PARENTS</a></li>
</ul>
</li>
<li> <a href="faq.html" target="_self">FAQ's</a></li>
</ul>
</div>
</body>
</html>
any help would be much appreciated Ok, i have this side div thats small. I want to be able to mouse-over (hover) over it or if not that click it. When either action is done, than it will reveal a input field attached to that small tab that was hovered, or clicked. If you need more details or explanation than reply, I cant really explain it but i will try. i made a nice pop up div with object details. when i control scroll and resize the browser contents everything follows except this pop up div. so the content inside explodes or shrinks where the actual div height and width stay the same. what have you guys done to fix this? thanks hi i have a #nav bar which has a drop down on one the <li>'s i have margin-top: 10px; on the ul li ul so theres a gap between the nav and the dropdown when the mouse goes over it, the drop down dissapears...is there a way to stop this? cheers |
|||||||