View Full Version : Help urgent!!

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:


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!!

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;

(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!


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

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:


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/)