|
CSS - Question About Onmouseout Effect Using Css
question about onmouseout effect using css
my question is if i move the mouse over an image which is a link to get any effect i can use a:hover{ } lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none; <img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ... #home{ display: none; } #about{ display: none; } ... only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be visiblerowhomeimage:hover{ #home.visibility: visible; } which would show the invisible image on mouse over for home, aboutus etc... please advice if my code is correct. thanks. Similar TutorialsHaving trouble with using CSS for email link. The problem is that mouse hover produces a black background - this is the intention. However, after clicking on link to open email client, the link (on that page) doesn't have the balck background effect. Other pages in the site are OK - until I click them once. Am I missing a section from the css file below that would give me the same hover effect even after the action of clicking the mailto: link has been done? Many thanks a:link.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:visited.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:hover.link1 { color: #CDBC75; text-decoration: none; background-color: #000000 } a:active.link1 { color: #CDBC75; text-decoration: none; background-color: transparent Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left. thanks in advance. Hello, I have a table inside a layer (position: absolute). I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message. Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution. Code below. What am I doing wrong? <div style="position:relative; z-index:1;"> <div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>table</td> </tr> </table> </div> </div> Thanks so much! I'm perplexed. I have a div, Code: <div class="classname"> containing a table in muliple pages. I tried applying css style to the div using .classname{ css }, backgroundcolor took affect but color and font-size didn't, its works on others pages though. So I tried Code: <table style="color: red; font-size: 12px;"> This worked! I can't understand why the css would not affect the div itself. Talk about annoying. If anyone has any possible explanations, I'd like to hear. css are assigned to individual div's. body has backgroundcolor only. http://www.meyerweb.com/eric/css/ed...ral/glassy.html Doesn't work in IE (surprise surprise) but apart from that it is an extremely cool effect! Hi guys, This site Valentino dot com has the menu slide out another transparent image when you mouse over it. How is this done? How can I do this? What is the code etc? Peter Along the left side of bing are some text links in a table cell. When bing loads you can see a semi-transparent block to give the text contrast if the background has a light color. Also, there is a rollover effect that shades the text. 1. How do I get the semi-transparency? 2. how do Iget the rollover effect? hi , how to simulate (nowrap) effect using CSS thanks Hi there, I am trying to acheive an effect like the image below.. so when the link is hovered on, there is a light gray bg, but with a 1px space above and below the bg. This is my CSS I have, but it is displaying what looks like a 2px border because my link has a top and bottom gray border. Any ideas how I can acheive this effect? PHP Code: #categories_home a{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; padding: 2px 2px 2px 25px; border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; display:block; } #categories_home a:hover{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; display:block; padding: 2px 2px 2px 25px; background-color: #f6f6f6; border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff; } I'm creating a menu and use margin as a separator between menu elements. On the first and second level, margin works but no matter what I put on the third, they're all stick together. html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu_1st_normal"> <a href="default.asp?catID=17">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=5">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=44">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=45">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=46">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=6">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=7">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=8">abcde</a> </div> <div class="menu_1st_normal"> <a href="default.asp?catID=9">abcde</a> </div> </body> </html>
menu.css: css Code: Original - css Code .menu_1st_top{font-size:12px;padding:3px 2px 4px 12px; background: url(../images/menu_top_left.gif) no-repeat #0066CC 0px 0px; font-weight:bold;margin:0px 0 1px 0;color:white} .menu_1st_top a{color:white; font-weight:bold;} /* 1st level menu normal*/ .menu_1st_normal{font-size:12px;padding:3px 2px 4px 12px; background: #0066CC 0px 0px; font-weight:bold;margin:0 0 1px 0;color:white} .menu_1st_normal a{color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* 2nd level menu normal*/ .menu_2nd_normal{font-size:11px;padding:3px 2px 4px 20px; background:#3399FF;margin:0px 0px 1px 0px;} .menu_2nd_normal a{font-size:11px;color:white;font-weight:bold;} /* 3r level menu normal */ .menu_3rd_normal{font-size:11px;padding:3px 2px 4px 28px; background:#33CCFF;margin 0px 0px 1px 0px;} .menu_3rd_normal a{font-size:11px;color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* bottom image */ .menu_bottom_image{width:155px;height:10px;background:url(../images/menu_bottom_155.gif) no-repeat;font-size:1px;margin:0 0 1px 0;}
I have try with both firefox and IE, the result is the same. Any ideas? Thank you. My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
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=iso-8859-1" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
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. The url has been blocked? So I'll try this way: spidersandmilkdotcomforwardslashspiderdotcss can some one please help me out in creating that red areas... is any method possible using CSS tht cutting border margin effect... or is using a image the only option. even with using image. how can i get the right side one ? the corner part where its cut cross .. Im trying to a hover effect with css kinda like the one here http://tabbywrocks.tumblr.com/ on images. i was wondering if anybody could give me a site to some example code that i could look at or something. i looked a bit myself but i couldnt find anything that had exactly what i wanted. Im hoping you don't need JavaScript for it but i think you might I am making this page and I have a css link thing on my pages and on the mycss.ccs has the code to change the kind of button but I only want it to take a effect with the buttons that I give them a name that matches the name of the buttons it should effect. Thank you. The third row as it is behaves as it should, spanning 3 columns. When I change the display style to none, the final row dissapears, which again is fine. However, when I click on the Show Description button, the textarea appears, but the first cell in the first row expands to the same width as the textarea two rows below, overwriting the colspan of the bottom row. Can anyone explain why its behaving this way? How can I fix this? Code: <table border="1" style="width:100%;"> <tr> <td width="400" align="left"></td> <td width="200" align="left"><span class="red"></span></td> <td width="312" align="left"><span class="red"></span> </td> </tr> <tr> <td align="center" valign="middle" colspan="3"> <input type="button" id="ShowDescription" value="Show Description" onclick="Desc(this);"> </td> </tr> <tr> <td id="desc1" align="center" colspan="3" style="display: block;"> <textarea cols="100" rows="15"></textarea> </td> </tr> </table> Code: <script type="text/javascript">
var state = true;
function Desc(obj)
{
if(state)
{
obj.value = 'Close Description'; document.getElementById("desc1").style.display = "block"; } else{ obj.value = 'Open Description'; document.getElementById("desc1").style.display = "none"; } state = !state; } </script>
I was trying to achieve the same effect as tables do with CSS yesterday but I can't figure out a clean way to do it. Example he http://unoriginalblog.com/projectanisaga.php I was thinking of defining two different <p> classes. Have one floating left, and the other with a big left margin. I don't think that's the neatest way to do it, so I've used tables here. Can anyone share some light with me? Second thing: I've seen several CSS documents with a specific fix for IE - but I can't remember what it is, I can't remember which selector was changed for IE... I think it might have been HTML - but could someone explain to me why? Thanks in advance!! I have asked a lot here Edit: FIXED link http://www.moridin.moved.in/blog/ That says about it all. Thank you for your time I just got done with the second CSS tutorial for today. Please drop a comment telling me what you think. http://www.majd-gfx.com/tutorials.php?cmd=view&cat=css&id=16 |
|||||||