将元素拉出悬浮范围()

Question

我有一个菜单栏的元素，动画50%的不透明度在悬停。

当启用悬停效果时，会出现一个覆盖，上面写着“单击以编辑”。然而，这种覆盖(因为它属于动画div)，也是半透明的。

JSFiddle：https://jsfiddle.net/3jeezjrb/3/

我如何才能让.click-to-edit中的内容保持100%的不透明性，而不是动画呢？我需要把他们从hover()的范围中拉出来，还是调整他们的CSS？

JQuery：

$(".list-group-item").hover(function () {
    $(this).stop().animate({
        "opacity": "0.5"
    }, 250);
    $(this).find(".click-to-edit").css("display", "block");
}, function () {
    $(this).stop().animate({
        "opacity": 1
    }, 250);
    $(this).find(".click-to-edit").css("display", "none");
});

CSS：

.click-to-edit {
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 700;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

HTML：

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group">
            <a class="list-group-item" href="#">
                Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.
                <div class="click-to-edit" style="display:none">CLICK TO EDIT</div>
            </a>
            <a class="list-group-item" href="#">
                Brunch Bushwick pop-up ennui Kickstarter.  Yr crucifix scenester, Shoreditch taxidermy art party flannel Odd Future.
                <div class="click-to-edit" style="display:none">CLICK TO EDIT</div>
            </a>
        </div>
    </div>
</div>

Answer 1

这是不可能保持不透明的孩子不同于它的父母。父元素的不透明度将影响子元素。更好的方法是有一个单独的div，其中包含文本并设置不透明度。演示：https://jsfiddle.net/3jeezjrb/6/

HTML:

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group"> <a class="list-group-item" href="#">
                <div class="text">Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.</div>
                <div class="click-to-edit" style="display:none">CLICK TO EDIT</div>
            </a>
 <a class="list-group-item" href="#">
                <div class="text">Brunch Bushwick pop-up ennui Kickstarter.  Yr crucifix scenester, Shoreditch taxidermy art party flannel Odd Future.</div>
                <div class="click-to-edit" style="display:none">CLICK TO EDIT</div>
            </a>

        </div>
    </div>
</div>

JS:

$(".list-group-item").hover(function () {
    $(this).find(".text").stop().animate({
        "opacity": "0.5"
    }, 250);
    $(this).find(".click-to-edit").css("display", "block");
}, function () {
    $(this).find(".text").animate({
        "opacity": 1
    }, 250);
    $(this).find(".click-to-edit").css("display", "none");
});

在这里，文本部分被包装在.text div中。

纯CSS解决方案：

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group"> <a class="list-group-item" href="#">
                <div class="text">Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.</div>
                <div class="click-to-edit">CLICK TO EDIT</div>
            </a>
 <a class="list-group-item" href="#">
                <div class="text">Brunch Bushwick pop-up ennui Kickstarter.  Yr crucifix scenester, Shoreditch taxidermy art party flannel Odd Future.</div>
                <div class="click-to-edit">CLICK TO EDIT</div>
            </a>

        </div>
    </div>
</div>

CSS

.click-to-edit {
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 700;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.list-group-item:hover .text {
    opacity:0.5;
    transition:all 400ms ease-in-out; //modify it according to your choice.
}
.list-group-item:hover .click-to-edit {
    display:block;
}
.click-to-edit {
    display:none;
}

演示：https://jsfiddle.net/3jeezjrb/9/

Answer 2

不透明是遗传的。我的经验法则总是使用background-color: rgba

编辑：

不透明度影响样式包含元素的所有其他子元素。

见更新的Fiddle

<div class="list-group-container"> 
       <a class="list-group-item" href="#">Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.</a>
       <div class="click-to-edit" style="display:none"><span>CLICK TO EDIT</span></div>
</div>
<div class="list-group-container"> 
       <a class="list-group-item" href="#">Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.</a>
       <div class="click-to-edit" style="display:none"><span>CLICK TO EDIT</span></div>
</div>

CSS

.list-group-container {
   position: relative;
}
.click-to-edit {
   height: 100%;
   width: 100%;
   position: absolute;
   background-color: rgba(255, 255, 255, .8);
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-weight: 700;
   text-align: center;
}

.click-to-edit span {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

jQuery

$(".list-group-container").hover(function () {
     $(this).find(".click-to-edit").css("display", "block");
}, function () {
     $(this).find(".click-to-edit").css("display", "none");
});

Answer 3

您可以不使用jquery就可以这样做，也可以这样做。演示

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group">
            <a class="list-group-item" href="#">
                Put a bird on it meditation Williamsburg distillery banh mi disrupt. Artisan PBR&amp;B synth sustainable photo booth.
                <div class="click-to-edit">CLICK TO EDIT</div>
            </a>
            <a class="list-group-item" href="#">
                Brunch Bushwick pop-up ennui Kickstarter.  Yr crucifix scenester, Shoreditch taxidermy art party flannel Odd Future.
                <div class="click-to-edit">CLICK TO EDIT</div>
            </a>
        </div>
    </div>
</div>

.click-to-edit {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    background:rgba(0,0,0,0.5); 
    width:100%;
    height:100%;
    display:block;
    z-index:2
}

.list-group a:hover .click-to-edit{display:block}
.list-group a{position:relative;}