小编Jas*_*ing的帖子

希望有人能告诉我这是否可能,因为我已经搜索过,无法想出我想要的效果.

我基本上希望将边框悬停在中心位置,这样当鼠标悬停在链接上时,边框底部就会居中.我希望边框宽度是一个大约20px的固定大小并居中.

你可以看到它到目前为止非常基本,jsfiddle就在这里:http://jsfiddle.net/pCQLN/3/

我想要如下图所示的内容:

感谢您随时随地!

这是我的代码;

HTML

<div id="wrap">
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</div>

CSS

#wrap {
    width:40em;
    height:3em;
    margin:0 auto;
}
#nav {
    float:right;
    width:75%;
}
#nav ul {
    display:inline;
    list-style: none;
    float: right;
}
#nav li {
    float: left;
    width:50px padding-right:1em;
}
#nav a {
    text-align:center;
    text-decoration:none;
    color: #888;
    font-size:1em;
    float: left;
}
#nav a:hover {
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

我正在尝试使用<?php echo $product->id; ?>第6行解析并返回woocommerce中产品的ID ,但是我在理解函数中的语法时遇到了问题.

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
    function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
      if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple qodef-btn qodef-btn-outline">Add</button>';
        $html .= '</form>';
      }
      return $html;
    }

不幸的是,这只是data-product_id="<?php …

我使用一些jquery通过点击附加按钮来隐藏一些woocommerce div,但我遇到的问题是,点击第一个也关闭第二个(即woocommerce-message以及woocommerce-info div).

jQuery(function($) {
    $('.woocommerce-message').append('<button class="hideme1">x</a>');
    $("button.hideme1").click(function() {
        $(".woocommerce-message").fadeOut("slow");
    });

});

jQuery(function($) {
    $('.woocommerce-info').append('<button class="hideme2">x</a>');
    $("button.hideme2").click(function() {
        $(".woocommerce-info").fadeOut("slow");
    });
});

我确实将它们放在一起并尝试将它们分开,并使用不同的按钮类.有什么指针吗？我努力学习这个,所以任何帮助都非常值得赞赏!

编辑:这似乎得益于Satpal和Rory ;

jQuery(function($) {
    $('.woocommerce-message').append('<button class="hideme">x</a>');
    $('.woocommerce-info').append('<button class="hideme">x</a>');
    $("button.hideme").click(function() {
        $(this).closest(".woocommerce-message").fadeOut("slow");
        $("button.hideme").click(function() {
            $(".woocommerce-info").fadeOut("slow");
        });
    })
})

我的jquery/js和炒鸡蛋一样难看!