Question

我的HTML

我想要做的是当用户在图像上徘徊时缩放效果，我通过在javascript中包含另一个css类来成功地做到这一点：

env.put(Context.INITIAL_CONTEXT_FACTORY, "com.sun.jndi.ldap.LdapCtxFactory");
env.put(Context.PROVIDER_URL, ldapUrl);
env.put(Context.SECURITY_AUTHENTICATION, "simple");
env.put(Context.SECURITY_PRINCIPAL, user);
env.put(Context.SECURITY_CREDENTIALS, password);
final LdapContext ctx = new InitialLdapContext(env, null);
final SearchControls searchControls = new SearchControls();
searchControls.setSearchScope(SearchControls.SUBTREE_SCOPE);
NamingEnumeration<?> namingEnum = ctx.search("dc=mycompany,dc=example", "(uid=*)", searchControls);
while (namingEnum.hasMore()) {
    // TODO
}
namingEnum.close();
ctx.close();

$(".featured-image .attachment-shop_catalog").addClass("otherClass");

    .otherClass
    {
        display:inline-block;
        border:0;
        position: relative;
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1); 
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1); 
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1);
        transition: all 200ms ease-in;
        transform: scale(1);   
    
    }
    .otherClass:hover
    {
        box-shadow: 0px 0px 150px #000000;
        z-index: 2;
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1.5);
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1.5);   
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1.5);
        transition: all 200ms ease-in;
        transform: scale(1.5);
    }
    .products li.product {
        background-color: #ecebeb !important;
        height: 10%
    }

到目前为止没问题。但我想要做的是，缩放不仅仅是图像而是整个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
         <li class="product type-product">
             <a href="#" class="product-images">
                  <span class="feautured-image">
                      <img src="http://www.omstema.com/wp-content/uploads/2016/12/new-template.jpg" class="attachment-shop_catalog">
                  </span>
             </a>
          <li>
    </ul>

项。

我该怎么做？任何想法都适用。

Answer 1

不幸的是，CSS中没有以前的兄弟选择器，你只能通过javascript实现这一点。

您需要做的是添加悬停进出事件，将当前悬停元素缓存为$(this)并使用javascript定位父元素

$(".attachment-shop_catalog").addClass("otherClass");

$(".otherClass").hover(function(){
   $(this).closest("li").addClass("otherClassParent");
    }, function(){
    $(this).closest("li").removeClass("otherClassParent");
});

工作示例：http://codepen.io/vincentccw/pen/BQvoNJ

Answer 2

这应该可以解决问题。

jQuery( ".featured-image .attachment-shop_catalog" ).hover(
  function() {
    jQuery(this).parents('li').addClass("otherClass");
  }, function() {
    jQuery(this).parents('li').removeClass("otherClass");
  }
);

.otherClass
{
    display:inline-block;
    border:0;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);   

}

在孩子徘徊时更改父元素的行为

2 个答案: