小编and*_*amb的帖子

我有一排160x160px浮动图像被浏览器调整为100x100px.

在悬停时,操纵它们通常的大小和边距的图像被操纵以使它们保持在相同的位置.

我接下来想要实现的是将放大的图像移动到前面,然后在悬停事件后再移回.我试图通过添加和删除z-index为100的类来实现此目的.

HTML是:

    <div id="content_top">
        <img class="thumbnail" src="images/thumbs/thumb1.jpg" width="100"  height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb2.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb3.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb4.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb5.jpg" width="100" height="100" border="0" alt=""/>
    </div>

使用CSS:

#content_top {
      height: 210px;
}

#content_top img{
      float:left;
      padding: 0 0 0 10px;
    }

    .ontop {
      z-index: 100;
    }

我正在使用的jQuery是:

$('#content_top img').hover(function(){
    $(this).filter(':not(:animated)').animate({
        'width' : '160px',
        'height' : '160px',
        'marginLeft' : '-30px',
        'marginRight' : '-30px',
        'marginBottom' : …

虽然这可以通过纯CSS轻松实现,但我正在使用的论坛软件将内联样式写入HTML,我需要覆盖,或者在这种情况下,使用jQuery动态更改.

我有一个列表菜单,我希望li.active元素中的锚具有黑色背景.这就是我的用武之地.

if ( $('#community_app_menu li a').parent().hasClass('active')) {
    $('#community_app_menu li a').css({
        'background-image': 'none',
    'background': 'rgba(0,0,0,1)'
 });
 } 

显然,这针对所有"#community_app_menu li a"元素,但我不能在IF中使用$(this).

我甚至想做什么？任何帮助将不胜感激.

谢谢,安迪

我想要做的事情很简单,但作为初学者,我对此感到非常沮丧.

这是我第一次尝试给你的想法.

我打算用图片做一些更有趣的事情,但我可以直接看到这不是解决方案.Mouseover正在改变图像,然后它逐渐消失,看起来很可怕.

所以,我想我可能会将所有图像放在同一个地方并将它们隐藏起来,使它们可见并在鼠标悬停在相应的热点上时将它们带到前面.我希望有一种方法可以使用.css()减少元素的z-index值.

这就是我的用武之地(同一网址,9872_gangsters_moll_2nd_attempt.html).

$(".hotspot").mouseover(function(){
          //Get the id of this triggered item
          var imageid = $(this).attr("id");
          //use it to make corresponding image id to use as jQuery selector
          var currentImg = '#img_'+ imageid;
  //      alert(currentImg);                   //shows variable is correct
  //      $('.product-img').show();            //works fine with a class
          $('currentImg').show();                //doesn't work with a variable
          $('currentImg').addClass('front');     //same, obviously
});

我最初尝试用css切换可见性,但是使用了jQuery的show/hide.都没有奏效.问题似乎是将'currentImg'作为选择器传递.

您可以提供的任何帮助将非常感激.

谢谢,

安迪