|
CSS - Multiple Class Change On Hover/rollover
Hey guys,
I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! Similar TutorialsI have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance I'm running into a problem with IE and using the :hover sub-class on an image within a class. IE: .zoomer img:hover {}. Works just fine, nice and neat in any other browser. Page in question: [URL=http://www.cavemanapparel.com/ncaa-c-34.html[/URL] Code: .zoomer img:hover { background: #008; margin-left: auto; margin-top: -400px; position: absolute; z-index: 999; display: block; border: 0; height: 60%; width: 40%; overflow: visible; clear:both; }
I've tried placing various hacks and/or solutions I've found across the web inside: <!--[if IE]> <![EndIf]--> but the POSITION attribute seems to be ignored and takes on the code in the .css file. I know WHY it's doing it but can't seem to fix it. Well, I guess if I knew exactly why it's doing it I would be able to fix it. Right? Anyway, if you view the page source, I'm sorry for the shoddy work. It's been a long couple of days. Any insight or solutions are greatly appreciated. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
In the HTML below I use CSS-code of Bonrouge (see http://bonrouge.com/br.php?page=rollover2) to make a rollover for an image. I would like to change the code so that onMouseOut the image doesn't change back to the original one but remains the rollover image. I have tried a lot of things but cannot get it working. Could someone help? This is the code I use now: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
/** rollover 2 (pure css) **/
#rollover2 a {text-decoration:none; display:block; height:100%; }
* html #rollover2 a {width:100%; }
#rollover2 {list-style-type:none; width:150px; margin:auto; padding:0;}
#rollover2 li {float:left; height:145px; width:145px; }
#rollover2 li#a a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/acteuropt.jpg);}
#rollover2 li#a a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/kopmetprisma3opt.jpg); }
#rollover2 li#b a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/goudvisbovenopt.jpg); }
#rollover2 li#b a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/denk2opt.jpg); }
#rollover2 a img {border:0; width:0; height:1px; margin-top:-1px; font-size:0; overflow:hidden; }
-->
</style>
</head>
<body>
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
On hover, the background-image changes.
<br>The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.
<br><br>
<ul id="rollover2" class="cfix">
<li id="a"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/denk1opt.jpg" width="30px"; height="30px" border="0" /></a></li>
<li id="b"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/johnhopt.jpg" width="30px"; height="30px" border="0"/></a></li>
</ul>
</div>
</body>
</html>
I developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled. Is it possible to do this using css? For an example, see this page: chellatextiles.com/Textfab/cocotweed.html Rollover a color thumbnail and it replaces the fabric details. There are about 500 thumbnails through the site that I would need to change. Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks. Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet: Code:
<style>
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all: Code:
<style>
a:hover { visibility: inherit }
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important. I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags. Confirm/deny/comment? hi all, I am trying to figure out how to have multiple CSS Rollover images with links on one page. Any ideas, tips, suggestions or samples are greatly appreciated! Brook Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben Right, Ive seen this before, but I think in javascript. Lets say i have a 400x400 box on my page and I have a menu of 3 points. I want to change the box's content based on which menu item is hovered over. Ive seen this in CSS with photo galleries, but its to complex for me to break apart and adapt to what I need it for. I need the menu to be on the right side of the box as well. Thanks for any help or links. Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code:
#tabnav a:hover
{
background: #bfbfbf;
color: #f05320;
}
Hello, I'm trying to make "tool-tip text" that I can position and style when a user rolls over a link. I have an id called menuTipsAppointments that I want to keep hidden until the user rolls over my Appointments anchor. I'm starting with: Code: #menuTipsAppointments {
display: none;
}
Then I do this: Code: a#appointments:hover {
display:block;
width: 30px;
height: 61px;
background-image: url(images/pin-over.png);
background-repeat: no-repeat;
background-position: top left;
#menuTipsAppointments display: block;
}
The extra bits in this block (above the menuTipsAppointments id) are related to the link's FIR. If my syntax is okay, I'm guessing that I can't do this with :hover, and am hoping for another way to go about it. This is my first site and is already quite messy, so whatever works is cool. Many thanks! Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad |
|||||||