Question

jQuery的新东西，所以我很感激任何人都可以给我的帮助。我已经查看了档案，似乎无法找到我正在寻找的答案。

基本上我想要实现的功能是 - 图像列表，当一个图像悬停时，所有其他图像都会消失。

我已经实现了这一点，但是，如果将光标移动到另一个图像上，它会一直淡出。如果你离开包装div，然后将光标移回它，淡出效果会起作用。我需要用户能够将光标从一个图像无缝移动到另一个图像。

这是js -

<script type="text/javascript">
    $(document).ready(function(){
        $(".charity_logo img").hover(
            function(){
                $(this).toggleClass("trigger").next().toggleClass("trigger");
            return false;
        });
    });
</script>
<script type="text/javascript">
    var types = ["trigger"], dimmed = 1.0, threshhold = 20;
    $(document).ready(function() {
        $.each(types, function(index, type) {
          var hover = (function() {
              var timer;
              return {
                  over: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", 0.4);}, threshhold);
                  },
                  off: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", dimmed);}, threshhold);
                  }
              };  
          })();
          $("img." + type).fadeTo(0, dimmed).hover(hover.over, hover.off);
        });
    });
</script>

---------------------这里是html ---------------------- -----

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-26.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-27.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-28.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-29.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

    </div><!--logo_banner-->

提前致谢！

Answer 1

我会在css

中这样做

.div_container img
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

.div_container:hover img
{
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

.div_container:hover img:hover
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

当没有悬停在contianer div上时，一切都完全可见。当鼠标进入div时，除了实际悬停在

上的img外，所有img都设置为透明

jQuery切换图像开/关问题

1 个答案: