Question

问题，我创建了我的wordpress主题，用户将鼠标悬停在帖子链接上，然后链接功能img会滑入并滑出。创建帖子的代码工作，这里是生成的。问题是我创建的转换jQuery代码不是为图像的幻灯片设置动画，而是正确地添加删除了“选定”类。谢谢你的帮助

这是我的包装

<div id="blog-posts">


</div>

里面是帖子去的地方。

<div id="blog-posts">
  <div class="posts-slider selected">                                       
  <img width="600" height="156" alt="angularjs" class="attachment-post-thumbnail wp-post-image sel-img" src="http://designsbycamaron.net/wp-content/uploads/2013/07/angularjs.png">                     
 <div class="slider-content">
  <ul>                                  
     <li><a href="http://designsbycamaron.net/2013/07/new-framework-knowledge/">                                        
     New Framework Knowledge
     </a>  
     </li>
     <li><p>I have been really careful to not add Frameworks that I am not familiar with or have not used extensively</p>
     </li>
   </ul>
   </div>
  </div>
 </div>

这是CSS

 div.selected img {
     display: block;
     height: auto;
     position: absolute;
  }

  .slider-content {
     clear: both;
     float: right;
     padding-right: 20px;
     text-align: right;
     width: 350px;
   }

这是我的jQuery，它假设要进行转换。

  $('.posts-slider a').mouseover(function(){
$(this).parents('.posts-slider img').slideToggle().siblings('.selected img').slideToggle('slow');
    $(this).parents('.posts-slider').addClass('selected').siblings('.selected').removeClass('selected');
});

您可以在my website上看到此版本的实时版本。

我认为这很简单。

Answer 1

首先，HTML的布局并不是真正有利于一个简单的解决方案，但是 - 这应该有效。将鼠标悬停功能替换为：

$('.posts-slider a').mouseover(function(){
      var wrapper = $(this).closest('.posts-slider');
      var image = $('img', wrapper);
      $('.posts-slider img').not(image).slideUp();
      image.slideDown();
      $('.posts-slider').removeClass('selected').filter(wrapper).addClass('selected');
});

并替换您的CSS，以便所有图片都是position:absolute，而不仅仅是.selected父图片。

仅交换图像

1 个答案: