Question

我有一个菜单栏，其中的元素在悬停时动画效果为50％。

启用悬停效果后，会出现一个显示“点击编辑”的叠加层。但是，此叠加层（因为它位于动画App.getInstance().getWidth()内）也是半透明的。

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

如何让div内的内容无法动画，保持100％的不透明度？我是否需要将它们拉出.click-to-edit的范围，或者调整它们的CSS？

JQuery的：

hover()

CSS：

$(".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");
});

HTML：

.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%);
}

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解决方案：

<强> 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">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

编辑：

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

See updated Fiddle

<强> HTML

<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这样做。demo

<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;}

将元素拉出悬停范围（）

3 个答案: