CSS - Css: Using Hover To Change Another Image (that Is Not Being Hovered Over)

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

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

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

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

Please advise. thanks

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?

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

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!

I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply:

.postbitleft { background-color: #0B198C; }

(aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript?

Regards,

James

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

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

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 /

Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes:

Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green.

Screenshot:



And when minibuttons is hovered over:



But as you can see, it moves the login div too.

Appropriate CSS:

Code:

div.logo
{
	background-image: url("/images/logo.gif");
	border: solid 1px #808080;
	border-bottom: none;
	border-top: none;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	width: 775px
}

div.login
{
	border: solid 1px #00ff00;
	height: 75px;
	left: 625px;
	position: relative;
	top: -18px;
	width: 145px
}

div.minibuttons
{
	border: solid 1px #0000ff;
	left: 570px;
	position: relative;
	top: 70px;
	width: 48px
}

div.minibuttons:hover
{
	left: 570px;
	position: relative;
	top: 1px;
	width: 48px
}

Appropriate HTML:

Code:

		<div class="logo">
			<div class="minibuttons">
				<a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a>
				&nbsp;<a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a>
			</div>
			<div class="login">
				<form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()">
					<fieldset class="login">
				  		<input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br />
			  			<input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br />
						<select class="service" name="service">
							<option value="2082">cPanel</option>
						</select>
			  			<input type="submit" name="login" value="Login" class="button" />
					</fieldset>
				</form>
			</div>
		</div>

Appropriate JS:

Code:

if (document.images)
{
	var flipped = new Array();
	for(i=0; i< inames.length; i++)
	{
    	flipped[i] = new Image();
		if(i <= 7)
	    flipped[i].src = "/images/roll/"+inames[i]+".gif";
		if(i > 7 && i <= 9)
	    flipped[i].src = "/images/full/"+inames[i]+".gif";
	}
}

function over(num)
{
	if(document.images)
	{
    	revert[num] = document.images[inames[num]].src;
		document.images[inames[num]].src = flipped[num].src;
	}
}
function out(num)
{
	if(document.images)
	document.images[inames[num]].src = revert[num];
}

Any ideas people?

Thanks,
Danny.