how to get a hover effect with jQuery?? Its not wo

问题:

I'm trying to get hover effect similar to this example. But couldn't get it. Here is the link

回答1:

On test page this is your css:

.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}

On production page:

.project .thumb {
width: 260px;
float: left;
}

Add position: relative to .project .thumb

回答2:

Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.

Or, perhaps even better, get JQuery from Google Libraries:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

回答3:

It looks like the code copied to the new page is missing the position:relative, which would fix the issue. Now, for security, you may want to limit the height of the block and set the overflow to hidden.

回答4:

The reason it's not working is because you are missing a css property

.project .thumb img {position:absolute}

notice that you have this line in your test page.

the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.

Also the .project .thumb a line is missing it's width and height.

Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.

回答5:

You want to specify height:150px; on your outer class (.outer). Currently it's set to 250px which is too tall.

回答6:

Its because in your real project your css is in the /css directory. So your CSS style is looking for /css/images/snbw_thumb.jpg which doesn't exist. Change your CSS style to ../images/snbw_thumb.jpg and it should fix it.

回答7:

Your image is 404ing due to your css rule for .project .thumb a{}
It points to "images/snbw_thumb.jpg" but you'll likely want to use "/images/snbw_thumb.jpg"

Bad URL : http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg

Good URL : http://dragonfly.zymichost.com/images/snbw_thumb.jpg

(Also, it looks like your pages aren't really serving 404s as the bad URL )

Hope this helps

-Chris