3 Replies - 670 Views - Last Post: 22 July 2009 - 11:52 AM

#1 codyisairplane  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 14-February 09

CSS Rollover confusion

Posted 21 July 2009 - 09:37 PM

I definitely made the image rollover on hover and when I click, it goes to the linked website.
I have a problem though, When I go back to the original CSS Rollover image, it doesn't rollover anymore.
I can only click it once.

Here's the code:
<style>
a.twitter:link, .photos{
	width:30px;
	height:40px;
	display:block;
	background-image:url();}

a.twitter:hover{
	width:30px;
	height:40px;
	display:block;
	background-image:url(rollover_image);}
</style>


Then I put the CSS in a DIV:
<div class="my_twitter" style=" position: absolute; top: 100px; width: 30px; height: 40px; left: 50%; margin-left: 327px ! important; background-color: transparent;">

<span class="hover">

<a class="twitter" href="Twitter_link"><br /></a>
</div>



What am I doing wrong?


Thanks friends,
Cody

** Edit ** :code:

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Rollover confusion

#2 hadi_php  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 10
  • View blog
  • Posts: 382
  • Joined: 23-August 08

Re: CSS Rollover confusion

Posted 22 July 2009 - 12:33 AM

i suggets u this

#twitter { }
#twitter a { }
#twitter a:hover { }
#twitter img {}


<div id = "twitter">
	<a herf="#"> Link </a>
	<img > </img>
</div>


u also can add class on it
Was This Post Helpful? 0
  • +
  • -

#3 codyisairplane  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 14-February 09

Re: CSS Rollover confusion

Posted 22 July 2009 - 11:17 AM

So would I put the hover image in the brackets, or in the DIV?
Was This Post Helpful? 0
  • +
  • -

#4 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: CSS Rollover confusion

Posted 22 July 2009 - 11:52 AM

Heres there different ways.
Choose whats suitable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>
<style>

/*Option one stylesheet*/
a.test1 {background-image: url(blue_Browse_64.png); display: block; width: 64px; height: 22px;}
a.test1:hover {background-image: url(green_Browse_64.png); display: block; width: 64px; height: 22px;}



/*Option two stylesheet */

span.test2 {}

span.test2:hover {background-image: url(main-buttonOver-tile.jpg);}



/*Option three stylesheet */

div.test3 {width: 200px; height: 48px;}

div.test3:hover {width: 200px; height: 48px; background-image: url(main-buttonOver-tile.jpg);}
a {display: block; width: 200px; height: 48px;}


</style>


<body>



<h3>Option 1</h3>
<a href="#" class="test1"></a>


<h3>Option 2</h3>
<a href="#"><span class="test2">Look data here</span></a>


<h3>Option 3</h3>
<div class="test3"><a href="#" class="test3a">Look data here</a></div>

</body>
</html>


just change the images and sizes to match your needs
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1