如何悬停元素并使其他元素也使用该效果？答案

【问题标题】：How to hover element and make other element use that effect too?如何悬停元素并使其他元素也使用该效果？
【发布时间】：2021-02-01 21:57:49
【问题描述】：

我想对卡片中的图像做一些悬停阴影效果，效果很好，但是当我将鼠标移到标题时如何使悬停效果保持不变？没有它，它看起来很糟糕:(

顺便说一句，有没有办法做到“聪明”？我觉得我的代码在位置和 translateX 等方面有点复杂。

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>

【问题讨论】：

将悬停应用到.galleria-section > div:hover .top-galleria-shadow {}
简而言之，将悬停效果放在“top-galleria-shadow”父级上应该可以正常工作:-)，我看到你已经做到了，快乐编码

标签： html css css-selectors

【解决方案1】：

在这种情况下你可以使用兄弟选择器，比如

.top-galleria-shadow + p {
  pointer-events: none;
}

并在其中使用pointer-events: none; 以不让它对光标做出反应，而是让它悬停并单击“通过它”到它后面的元素：

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}
.top-galleria-shadow + p {
  pointer-events: none;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>

【讨论】：