PDA

View Full Version : Help urgent!!



nasyitah08
Feb 28th, 2012, 07:30 AM
is there a way to do this on hover effect?

I want to add a graphic when there is a hover effect and a background color.
Is there a way to combine them?
before hover there is only the text and when hovered, there is the background color on the left and the graphic arrow on the right. I hope someone would be able to help me out! I need it to be done by tonight! :(

The red line is the indication of the left and right.
http://img10.imageshack.us/img10/8353/94060241.png (http://imageshack.us/photo/my-images/10/94060241.png/)


Here is the code:

http://jsfiddle.net/nasyitah08/UvqPc/33/

I'd like to replace the css with a graphic arrow as that the request I'm supposed to follow. this is driving me nuts! please help anyone!!

Riku
Feb 28th, 2012, 08:22 AM
Easiest way to do this is giving the div that contains the link an hover effect background-image.

Let's assume your HTML code part looks more or less like this;

<div id="hello"><a href="#">Hello</a></div>


Then you can do something like this to your CSS;


#hello {
width: 50px;
}

#hello:hover {
width: 50px;
background-image:url(linkhover.png);
}


(You need to cut the whole background you want this way, the "only" color part and the arrow to same picture)
Hope this helps you to get started!

-Riku

VIPStephan
Feb 28th, 2012, 03:01 PM
All possible with CSS (in modern browsers): http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

nasyitah08
Feb 29th, 2012, 04:02 AM
hi VIPStephen,

Yup, its all possible in CSS. I've cracked my brain to do it in CSS and only now I was told to do it in image form as there are some text with 2 lines. Here is my work:

http://jsfiddle.net/nasyitah08/UvqPc/35/

This is actually what I meant with the double line and the arrow.

http://img528.imageshack.us/img528/6108/arrowqt.png (http://imageshack.us/photo/my-images/528/arrowqt.png/)

Thanks!