CSS - Change Box Content On Hover

Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work:

<a href="test.html" style="a:hover { color: #DA8525; }">Test</a>

Is that suppose to work?

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!

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;
}

I have these two areas.

Code:

.MenuItem {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:0px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

.MenuItemTop {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:2px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

which refer to the left nav.

My code only changes the color behind the text, not the entire area (box) behind the text.

Code:

.MenuItemTop a:hover, .MenuItem a:hover {
	color:#FFFFFF;
	text-decoration:underline;
	font-size:12px;
	background-color:#000000;
}

Any ideas why?

example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm

Brad

How do i change img button to 3d on hover or mouseover using css.

Please advise. thanks

I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen:

i have a bunch of headings along the top of a page that a person can click on.

Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet)

tanks, matt.

Hi there,

I have a script that displays content when a link is hovered on which then hides when the mouse is hovered off it. Is there a way to make it so the content stays there until one of the other links is hovered on?

This is my CSS:

PHP Code:
 div#links a span {display: none;}


div#links a:hover span {display: block;
   position: absolute; top: 200px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}


div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;
   } 





and this is the HTMl
PHP Code:
<div id="links">
<a href="http://www.meyerweb.com/eric/css/">Link 1<span>1</span></a>
<a href="http://www.meyerweb.com/eric/css/">Link 2<span>2</span></a>
<a href="http://www.meyerweb.com/eric/css/">Link 3<span>3</span></a>
</div> 





Any ideas?

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!

Hi, the title is sum of all:

i have a sprite image and over it another image (like an image frame). what i want is to move the lower image background to the given coordinates when mouse hovers over the top image :/

in other words, i can't get sprite to work while having another image over it.


can anyone help?



this is direct link to my dev server so you can see:

kp77-mine-nu~pokop

- is .
~ is /

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

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 guys,

Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS?

I was kinda thinking something like:

a.linkname:hover, a.linkname:focus body { background-color:#00FF00; }

but thats just a guess and doesnt work lol.

Many Thanks,

Alvin.

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.

Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>HOTWORKS</title>
  <link rel="stylesheet" href="stylz.css" type="text/css">
</head>

<body class="top" id="bdy" > 
<!-- Site navigation menu -->
<ul class="navbar" id="navlist">
	<li><a href="tools.html"><br>Tools</a>
	<li><a href="glass.html"><br>Glass <br> Artwork</a>
	<li><a href="pottery.html"><br>Ceramic<br> Artwork</a>
	<li><a href="about.html"><br>About</a>
</ul>

<!-- Main content -->
<h1>     </h1>

<p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
TOOLS - ART - MISCELLANEA 
<br>

<address>
</address>

</body>
</html>

Code:

#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}

Just to be complete, and in case there is something in here that you might need, here is the full css file:

Code:

  body.top {
    padding-left: 11em;
    font-family: Fantasy, "Times New Roman", Times, serif;
    font-size:15px;
    color: #000000;
    /*background-image: url(images/tab3.jpg) ; */
    background-position: 210px 10px; 
    background-repeat:no-repeat;
    background-color: #000000;
    margin-left:5cm;
	}

   body.top {  background-image: url(images/tab3.jpg) ; }
   
  ul.navbar {
   	color: #000000;
    list-style-type: none;
    position: absolute;
    display:block;
    float:left;
    left: 1em;
	}

  h1 {
    font-family: Helvetica, Geneva, Arial,
		SunSans-Regular, sans-serif 
	}
  ul.navbar li {
		text-align:center; 
   /* vertical-align:100px; */
   background: #000000;
   border-right: 1em solid black;
	}
  ul.navbar a {
		text-decoration: none ;
		 top:10%; 
    height:4em; 
  
	}
  a:link {
    color: white }
  a:visited {
    color: white }

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:144px;
    height:137px;
    color:#fff;
    text-decoration:none;
    background:url("images/drawer4.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
}
#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}
#navlist a:active {
	 background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FFC741;
}

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.