Question

我想问你，当我同时悬停在“之后”时，是否可以悬停元素？没有瞄准元素？我想在将afrer悬停时为p元素设置不透明度。我是编码的新手，所以如果您能帮助我解决这个问题，我将非常高兴！

*{

    padding:0;
    margin:0;
}
.container{
    position:relative;

}
.box{
    margin: 50px auto;
    width:200px;
    height:400px;
    background-color:gray;
    border-radius:20px;
}
.box::after{
    content:"";
    position:absolute;
    bottom:0;
    right:30.5%;
    width:50px;
    height:50px;
    border-top-left-radius:100%;
    border-bottom-right-radius:20px;
    background-color:#73688e;
    transition: 1s;
}
.box:hover:after{
    opacity:1;
    border-radius:20px;
    width:39%;
    height:100%;
}
.text{
    opacity:0;
    position:relative;
    z-index:1;
}

<div class="container">
    <div class="box">
        <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, corrupti architecto voluptatum tempora magni non sapiente ab voluptates, quos obcaecati impedit, eos illo quia eveniet vel quibusdam perferendis incidunt minus.</p>
    </div> 
</div>

Answer 1

使用pointer-events，您可以这样做。

.container{
    position:relative;
}
.box{
    margin: 50px auto;
    width:200px;
    height:400px;
    background-color:gray;
    border-radius:20px;
    pointer-events:none; /* added */
}
.box::after{
    content:"";
    position:absolute;
    bottom:0;
    right:30.5%;
    width:50px;
    height:50px;
    border-top-left-radius:100%;
    border-bottom-right-radius:20px;
    background-color:#73688e;
    transition: 1s;
    pointer-events:initial; /* added */
}
.box:hover:after{
    opacity:1;
    border-radius:20px;
    width:39%;
    height:100%;
}
.text{
    opacity:0;
    position:relative;
    z-index:1;
    transition: 1s;
}
/* added */
.box:hover .text {
    opacity:1;
    pointer-events:initial; 
}
/**/

<div class="container">
    <div class="box">
        <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, corrupti architecto voluptatum tempora magni non sapiente ab voluptates, quos obcaecati impedit, eos illo quia eveniet vel quibusdam perferendis incidunt minus.</p>
    </div> 
</div>

悬停多个元素

1 个答案: