:Hover help

[DrStyles]

I'm making a Userstyle for the Avant site, but so far I got 2 problems:

1. I have "tbody>tr:hover{opacity: .75;}" and "td[class="genmed"]{opacity: 1 !important;}", but when I hover over the rd[class="genmed"] it becomes semitransparent. I need it solid always.

2. I need to hover over one picture, and have it replace a picture for another picture. I have no clue how to do this. So I have...

img[src="./styles/avantbrowser/theme/images/home1.png"]:hover,
img[src="./img/tabs/home1.png"]:hover
{
height: 0px !important;
width: 0px !important;
padding-left: 83px !important;
padding-top: 35px !important;
background: url(http://www.avantbrowser.com/img/tabs/home2.png) no-repeat !important;
}

..but I also need ./img/tabs/support1.png to become ./img/tabs/support3.png

is lame. =/ Need 2nd one to be

 

[Lyerae]

Why make it so complicated?

.first 
{
    background: url(enterFirstURL);
}
.second:hover
{
    background: url(enterSecondURL);
}

Should work. Edit as needed.

 

[UndeadDragon]

Why make it so complicated?

.first 
{
    background: url(enterFirstURL);
}
.second:hover
{
    background: url(enterSecondURL);
}

Should work. Edit as needed.

I don't think you understand the problem. He also wants the onHover effect to change another picture.

I think you may need some JavaScript, or jQuery for this.

 

[Lyerae]

Oh, to change another picture? Whoops. My bad.

 

[JerseyFoo]

It can be done with CSS.


Make the blue part in this image transparent... -->

...and add the blue part to this image...

<-- here

Append the active image to the bottom of the inactive image.

And use this CSS....

/* assuming the width of the blue part is 20px */
li{
  display: inline-block;
  margin: 0;
  background-image: (/img/tabs/home.png);
  margin-left: -20px;
  width: 103px;
}
li:hover{
  background-position: bottom;
}

Untested


Change "display: inline-block" to "float: left" and convert all images to GIFs if you want IE6 support.

 

[Miz]

I am doing that on my site right now, ironically. It can easily be done in CSS
I use two different images just to make it easier on myself. But you can do what JerseyFoo did and slice the image.

ul.navi li a{
	display: block;
height: ##px;
width: ##px;
background-image:url('image');
background-repeat:no-repeat;
}

ul.navi li a:hover {
	background-image:url('image2');
background-repeat:no-repeat;
}

 

[Magentix]

On a small note, why use td[class="genmed"] instead of td.genmed?

 

[DrStyles]

I'm trying to do what JerseyFoo said, but it's just showing what it did before? I'm not really sure where it actually shows the part where it deals with the 2nd img.

/*Home*/
img[src="./styles/avantbrowser/theme/images/home1.png"],
img[src="./img/tabs/home1.png"]
{display: inline-block;
margin: 0;
background-image: url(http://www.avantbrowser.com/img/tabs/home2.png);
margin-left: -20px;
width: 83px;}

img[src="./styles/avantbrowser/theme/images/home1.png"]:hover,
img[src="./img/tabs/home1.png"]:hover
{background-position: bottom;}

(/img/tabs/home.png); didn't work so I used
background-image: url(http://www.avantbrowser.com/img/tabs/home2.png);
is that the problem?

On a small note, why use td[class="genmed"] instead of td.genmed?

Is that bad? I just always did it like that with the [] instead of . or # for things. Then I don't have to remember . is class and # is id I guess.

 

[JerseyFoo]

img[src="./styles/avantbrowser/theme/images/home1.png"],
img[src="./img/tabs/home1.png"]

Thats the problem. You have to create a new image, and not use <IMG.

[] has poor support in IE.

 

[Magentix]

Try to keep [] usage to a minimum like form input

IE support is quote and CaSE sEnSITivE as well
input[type=text]
input[type="TEXT"]
input[TYPE="text"]
etc.. may fail

input[type="text"] for example should work in all browsers