hide and show when hover img

Page 1 of 1

3 Replies - 387 Views - Last Post: 11 January 2013 - 05:14 PM

#1 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

hide and show when hover img

Posted 10 January 2013 - 12:46 AM

i want a hidden link, which is a image. when user hover hover <td> or <img> than i want it to show. but the hover over code doesnt work. may be iam missing some thing.


index.html
...
 <tr>
     <td id='cart_center'>
	<a href='#' id='linkx'>
		<img src='IMAGE/x.png' id='imgx' />
	</a>
...



css code
#imgx
{
	 display: none;
}
#imgx:hover, #cart_center:hover
{
	display: inline;
	float:left;
}


Is This A Good Question/Topic? 0
  • +

Replies To: hide and show when hover img

#2 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 29
  • View blog
  • Posts: 192
  • Joined: 25-April 11

Re: hide and show when hover img

Posted 10 January 2013 - 01:15 AM

how can you hover an invisible image?

use JS instead and an appropriate class.

This post has been edited by Anthonidas: 10 January 2013 - 01:19 AM

Was This Post Helpful? 0
  • +
  • -

#3 j4v3d  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 49
  • Joined: 24-November 12

Re: hide and show when hover img

Posted 11 January 2013 - 04:33 PM

Maybe you can use jQuery to do it. 

('.selector-name').hover(
  function () {
    $(this).show();
  }, 
  function () {
    $(this).hide();
  }
);


Have a look at the jQuery documentation on hover. jQuery Hover Documentation

Any problems just post back here. Hope that helps you out.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1096
  • View blog
  • Posts: 3,414
  • Joined: 12-December 12

Re: hide and show when hover img

Posted 11 January 2013 - 05:14 PM 

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
    #imgx {
        position: relative;
        left: -999px;
   }
    #cart_center:hover img {
        left: 0;
    }
    </style>
</head>
<body>
<table>
 <tr>
     <td id='cart_center'>
	<a href='#' id='linkx'>
		<img src='IMAGE/x.jpg' id='imgx' alt="simple hover">
	</a>
     </td>
 </tr>
</table>

</body>
</html>


No need to resort to JS or jQuery!

This post has been edited by andrewsw: 11 January 2013 - 05:15 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1