|
CSS - Css And Mouse Overs..
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. Similar Tutorialsi want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me. Hello I am a Novice in web design that is trying to make his way. I am build a website for my company and trying to make it compatible with many devices. I have chosen to Use html and css. This is my issue. I have a side bar menu (nav) and I have a div (menuebar) set to 125 by 500px css property's: Height, width, margin top, margin bottom, float:left Then i have another div inside that one use for my LINK or Button. div (menulink) set to 110 x 28px css property's: Height, width,Padding : Left5px, Right 5px top 2px and bottom 2px , Font Ariel. I want this div (menulink) to highlight on a mouse over or hover the entire div like this website has there colorful menu bar. w w w DOT entheosweb DOT com/dreamweaver/default.asp the bar i am talking about starts with teal, green... ect If you notice you can select the text with in that rollover. so when I use a rollover i cant see any option to do that. Now I have learn how to do a " a hover" css with text links but it dose not hightlight the whole div container. I have tried a behavior on the div tag and that works but dose not disappear on mouse out. I have tried many combinations of multiple behaviors and single combinations with all the option with in them. No such luck.... I will thank any one advance who can help me with this. Ps i don't want to use rollovers because of how big the web site is even with PS actions set up to speed up the process of editing each roll over img. I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at. kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! 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. 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! 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> 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 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 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! 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 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? 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 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)
}
Is it possible to have a CSS popup (a:hover) be positioned with regard to the mouse pointer position similar to a tooltip? 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 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 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 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. |
|||||||