小编dun*_*140的帖子

我有两个相邻的选择器,我想在悬停在另一个上时产生效果.在下面的示例中,两个选择器应该在悬停时影响其他CSS.这在悬停.a时非常有效,但在悬停时则不然.b.我意识到这是因为DOM是按顺序读取的,因此CSS选择器无法向后工作.

但是,是否有可以实现此效果的jQuery解决方法(或任何其他建议)？

这是一个小提琴

谢谢.

HTML

<figure>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</figure>

CSS

.a {
    width: 100px;
    height: 100px;
    background: red;
}

.b {
    width: 100px;
    height: 100px;
    background: blue;
}

.a:hover ~ .b {
    background: green;
}

.b:hover ~ .a { /* This one doesn't work */
    background: green;
}

是否可以从 WordPress 中删除默认图像？更具体地说，那些由 WooCommerce 创建的？我正在构建一个完全自定义的主题，为此我不需要任何 WC 图像大小，因此我不想将它们存储在我们的服务器上。我在下面的代码中尝试了 codex remove_image_size()，但这会破坏媒体库。

谢谢。

// Remove default WC image sizes
function wpdocs_remove_plugin_image_sizes() {
    remove_image_size( 'woocommerce_thumbnail' );
    remove_image_size( 'woocommerce_single' );
    remove_image_size( 'woocommerce_gallery_thumbnail' );
    remove_image_size( 'shop_catalog' );
    remove_image_size( 'shop_single' );
    remove_image_size( 'shop_thumbnail' );
}
add_action('init', 'wpdocs_remove_plugin_image_sizes');

我正在使用woocommerce_checkout_fields过滤器来编辑 woocommerce 字段标签的值。它在结账页面上运行良好（正如您所期望的那样），但是我无法理解为什么它在帐户页面上不起作用。我以为这些田地还是从同一个地方取来的？更具体地说，我谈论的是 woocommerce 帐户页面上编辑地址端点上的地址字段？

我的代码尝试：

function custom_woocommerce_fields( $fields ) {

    // Billing Fields
    $fields['billing']['billing_first_name']['label'] = 'First name';
    $fields['billing']['billing_last_name']['label'] = 'Last name';
    $fields['billing']['billing_company']['label'] = 'Company name';
    $fields['billing']['billing_address_1']['label'] = 'Street address';
    $fields['billing']['billing_address_2']['label'] = 'Apartment, unit, etc.';
    $fields['billing']['billing_city']['label'] = 'City';
    $fields['billing']['billing_country']['label'] = 'Country';
    $fields['billing']['billing_state']['label'] = 'County/State';
    $fields['billing']['billing_postcode']['label'] = 'Postcode';
    $fields['billing']['billing_email']['label'] = 'Email';
    $fields['billing']['billing_phone']['label'] = 'Phone';

    // Shipping Fields
    $fields['shipping']['shipping_first_name']['label'] = 'First name';
    $fields['shipping']['shipping_last_name']['label'] = 'Last name';
    $fields['shipping']['shipping_company']['label'] = 'Company name';
    $fields['shipping']['shipping_address_1']['label'] = 'Street address';
    $fields['shipping']['shipping_address_2']['label'] = 'Apartment, unit, etc.';
    $fields['shipping']['shipping_city']['label'] …

我有一个固定的菜单栏，其中包含一个简单的<ul> <li>菜单系统。在li:hover我旁边有一个子菜单系统出现，这是相对于每个li的。不幸的是，这一点总是出现在所有父母的头顶上。

当我实际上希望它位于div#sidebar. 这可能吗？我没有太多运气z-index（包括-1），任何帮助将不胜感激！

<div id="sidebar">
    <nav class="secondary">
            <h2>Featured</h2>
            <ul>
                    <li>
                <a href="#">
                    <h3>Title</h3>
                </a>
                        <aside class="article-card">
                            <h4>TITLE</h4>
                            <h5>TEXT</h5>
                        </aside>
                    </li>
            </ul>
    </nav>
</div>


ul {
    list-style: none;
    display: inline-block;
    width: 59.6%;
    margin-right: 9.1%;
    float: right;
    margin-bottom: 40px;
}

li {
    display: block;
    margin-bottom: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#sidebar {
    background: #253e40;
    color: #8b8c91; …

当我的页面滚动时,我正在淡出div#hero-image.目前,下面的代码使用标称值1000来确保缓慢淡入淡出,但我的#hero-image div是浏览器高度的100%,所以我希望完全不透明度从1转换为0当用户从初始视口滚动100%高度div时.

任何帮助非常感谢!

/* Fade #hero-image on scroll */
$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / 1000);
    });
});

我有下面的jquery,当用户点击页面底部时添加或删除一个类.我想调整此代码以在用户接近底部时实现更改,或者当底部进入视口时？

任何帮助非常感谢!

JS

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height()) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

form我的页面上有各种元素，但是Firefox中的输入单选按钮有问题。单选按钮在Safari和Chrome中可以完美显示，但在Firefox中完全不同（圆形而不是正方形！），并且默认情况下已选中：，这也是一个问题。

从我的研究中，广泛建议使用-moz-appearance，但是在这种情况下，我找不到与我的查询直接相关的任何答案。任何帮助将不胜感激。

标记

<form>
    <label class="radio" for="#">One</label>
    <input type="radio">
    <label class="radio" for="#">Two</label>
    <input type="radio">
</form>

的CSS

input[type="radio"] {
    -webkit-appearance: none; /* Remove default appearance styling for Webkit */
    -moz-appearance: none; /* Remove default appearance styling for Firefox */
    background: #ccc;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 0 10px;
    cursor: pointer;
}

input[type="radio"]:hover { background: #e4e4e4; }

input[type="radio"]:checked {
    background: #000;
    position: relative;
    width: 45px;
    height: 45px;
}

input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 8px;
    background: …

我正在使用以下 Jquery 尝试在某个幻灯片编号上添加一个类（使用 Royalslider）。下面的代码适用于单个幻灯片编号，但您会注意到我也在尝试对一系列数字实现相同的效果 - 例如，在幻灯片 5-9 之间。然而，这不起作用，并且只为数组中的第一个数字触发。

任何帮助表示赞赏！

JS

// Track slide number and add class
this.rsInstance().ev.on('rsAfterSlideChange', function() {
    if( this.currSlideId === 1) {
        $('.what').addClass('current');
    } 
    else {
        $('.what').removeClass('current');
    }
    if( this.currSlideId === 2) {
        $('.why').addClass('current');
    } 
    else {
        $('.why').removeClass('current');
    }
    if( this.currSlideId === ( 5 || 6 || 7 || 8 || 9 )) {
        $('.accolades').addClass('current');
    } 
    else {
        $('.accolades').removeClass('current');
    }
});

我有一个有3个孩子的弹性容器,我想确保孩子们都对齐flex-start,但是最后一个孩子应该坐在容器的底部.

这难道不是可以组合align-content使用align-self？

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 15px 15px 50px 15px;
    height: 100%;
    background: red;
    width: 200px;
    height: 500px;
}

.item-1,
.item-2,
.item-3 { width: 100%; }

.item-3 {
    align-self: flex-end;
}

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>

我正在尝试将产品添加到 woocommerce 中的购物车，但遇到持续错误Uncaught ReferenceError: wc_add_to_cart_params is not defined。

之前多次使用过这种方法，没有出现问题，wc_add_to_cart_params 是否已从 woocommerce 中删除？如果是的话，替代品是什么？

我的代码如下：

  var productId = form.find('input[name=product_id]').val();
  var variationId = form.find('input[name=variation_id]').val();
  var qty = form.find('input[name=qty]').val();

  // Data array
  var data = {
    action: 'woocommerce_ajax_add_to_cart',
    product_id: productId,
    variation_id: variationId,
    quantity: qty,
  };

  // Ajax function
  $.ajax({
    type: 'post',
    url: wc_add_to_cart_params.ajax_url,
    data: data,
  });

谢谢

我试图在光标位置移动 X 个像素（例如 100px）时触发一个事件。因此，光标在 X 或 Y 方向上每移动 100 像素，我就会触发一个事件。每移动 100 像素，就应继续执行此操作。

我已经成功检测到光标的“当前”X 和 Y 位置，并设置了像素阈值，但正在努力解决其余的数学问题。有人可以帮忙吗？

$(window).on('mousemove', function(e){

    // Vars
    var cursorX = e.clientX;
    var cursorY = e.clientY;
    var cursorThreshold = 100;

    ... detect every 100px movement here...

});