|
CSS - Need Css Help With A Hover Element
Hi there,
Need some CSS guru help. If you visit my link: http://www.gabbr.com/js/viewer/cmedata/index1.html and hover over the years (top middles, 2008, 2009, 2010, etc) you will notice an orange bar extending from the top to the bottom of the page. I am trying to get the same effect on the left (month and day) but am unable to do so. The problem I am having is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing. Any advice? Similar TutorialsI have a couple of divs that slide out from the side of the browser window when the user hovers over a button which is sticking out from that div. This is easily accomplished in every browser except for IE. The problem is that there is other elements inside this div and when the mouse hovers over these other elements the slide out div goes back off the screen, because it thinks the mouse is no longer over the div when in fact it is. Has anyone ever ran into a problem like this and know how to fix it. I've been getting quite confused as to why some CSS wasn't doing what I'd expected it to do. I have code like this: Code: .tBox { width: 50px; height: 50px; }
.tHeader { opacity: 1 }
.tBox:hover .tHeader { opacity: 0.5 }
I then have my DIVs like this (simplified) Code: <div class="holder"> <div class="section1"> <div class="tBox"> </div> </div> <div class="section2"> <div class="tHeader"></div> </div> </div> So what I was expecting to happen is that when someone hovered over "tBox" then "tHeader" would switch opacity. But it wasn't. And I believe this is because tBox and tHeader aren't in the same parent. I read somewhere something about using a "+" to do some special selector stuff in the CSS but didn't really understand. Can someone please help me with how I can get this to work outside of them sharing their parent. Thanks. I know how to do this using Javascript, but I'm not sure if it can be done using CSS itself. I have a bunch if div tags and some anchor tags on my page. By default, the div tags are hidden, and when I mouseover an anchor, I would like a specific div to be displayed. Again, I can do this in Javascript, but would like to see if there is a CSS-only approach to this. Example HTML: Code: <div id="div1">Option1</div> <div id="div2">Option 2</div> <div id="div3">Option 3</div> <a id="link1" href="somepage.html"></a> <a id="link2" href="someotherpage.html"></a> <a id="link3" href="someotherpageentirely.html"></a> Example CSS: Code:
div#div1 div#div2 div#div3 {
display:none;
width:50px;
height:50px;
background-image: url(divimage.png);
}
a#link1 a#link2 a#link3 {
display:block;
width:100px;
height:100px;
background-image: url(myimage.png);
}
a#link1:hover a#link2:hover a#link3:hover
{
display:block;
width:120px;
height:120px;
background-image: url(myotherimage.png);
}
So in this instance, when one of the anchor tags is hovered over, I would like to change the associated (link1 -> div1, link2 -> div2, link3 -> div3) div CSS to change to be something like this: Code:
div#div1
{
display:block;
}
I realize I've generalized these CSS definitions and on my actual page I have individual CSS definitions for each anchor and div separately as they all differ slightly. Is there a way to do this using straight CSS or am I bound to Javascript in order to do this? Thanks! - skubik Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. 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! Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! 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 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 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 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 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. 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 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> 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 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. 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; } Hello: I would like to have a big font size of title on my web site for search engine optimuzation purpose, I wrap the title with a H1, then I define H1 in css as FONT-WEIGHT: bold; FONT-SIZE: 34px; COLOR: #000000; in other place I also have A:hover {COLOR: #6460AD; TEXT-DECORATION: underline; the title I put in is a hyper link, so when the mouse hovers on the title, the title shown as underlined, I want it to be TEXT-DECORATION: none I don't know the syntax in H1 definetion to disable the underline 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 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 |
|||||||