悬停效果和图像不透明度更改在 HTML/CSS 中不起作用

Hover effect and image opacity change not working in HTML/CSS

提问人：Aaron Tauro 提问时间：10/27/2023 更新时间：10/29/2023 访问量：55

问：

我正在处理一个 Web 项目，我正在尝试在第一张包含图像的卡片上创建悬停效果。当我将鼠标悬停在卡片上时，我希望卡片向上移动，并且图像变得完全可见（不透明度设置为 1）。我尝试了几种方法，但我似乎无法让它正常工作。这是我的 HTML 和 CSS：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <style>
        /* #arrow {
            position: relative;
            transition: top ease 0.5s;
        }
    
        #arrow:hover {
            top: -15px;
        }
    
        #arrow:hover img {
            transform: translate(0, -15px);
            transition: transform ease 0.5s;
        } */

        .your-card {
            position: relative;
            transition: transform 0.3s;
        }

        .your-card:hover {
            transform: translateY(-10px);
        }

        .your-card:hover img {
            transform: translate(0, -30px);
            transition: transform ease 0.5s;
            opacity: 1;
         }
    </style>
</head>

<body>
    <section class="text-gray-600 body-font">
        <div class="container px-5 py-24 mx-auto flex flex-wrap justify-center"> <!-- Added justify-center -->
            <div class="flex flex-col text-center w-full mb-32">
                <h1 class="sm:text-3xl font-normal" style="color: #2e66f4; font-size: 2.7rem;">Here's Why <span
                        class="bg-yellow-300 font-bold text-black px-2" style="border-radius: 6px;">Zephurus
                        Right</span> For You<span class="text-red-600 font-bold">.</span></h1>
                <h2 class="font-light mb-1 mt-5 font-serif pr-16" style="color: #999; font-size: 1.2rem;">Don't waste
                    your time anymore</h2>
            </div>
            <div class="flex flex-wrap -m-16">
                <!-- First Card -->
                <div class="p-4 w-[532px] h-[300px] your-card" id="arrow">
                    <div
                        class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col hover:shadow-lg">
                        <div
                            class="w-32 h-48 sm:mr-8 sm:mb-0 mb-4 flex rounded-full flex-shrink-0 left-0 absolute top-10 opacity-40 card-image">

                            <img src="./Image2-fotor-bg-remover-20231027103626.png" alt="ecommerce">
                        </div>
                        <div class="flex-grow ml-24 my-10">
                            <h2 class="text-gray-900 title-font font-medium mb-3 text-xl" style="color: #4a4a4a;">
                                Automate your sales process</h2>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Turn boring web forms
                                into friendly conversations</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Get your meetings and
                                sales calls scheduled</p>
                        </div>
                    </div>
                </div>

                <!-- Second Card -->
                <div class="p-4 w-[532px] h-[300px] mt-20">
                    <div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
                        <div
                            class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
                                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                        </div>
                        <div class="flex-grow">
                            <h2 class="text-gray-900 text-lg title-font font-medium mb-3" style="color: #4a4a4a;">
                                Perfect your customer support</h2>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Consistent 24/7
                                support across channels</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Solve their problems
                                faster</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; No wait time, quick
                                response</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Second Row -->
            <div class="flex flex-wrap -m-4">
                <!-- Third Card -->
                <div class="p-4 w-[532px] h-[300px]">
                    <div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
                        <div
                            class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-8 h-8" viewBox="0 0 24 24">
                                <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                            </svg>
                        </div>
                        <div class="flex-grow">
                            <h2 class="text-gray-900 text-lg title-font font-medium mb-3" style="color: #4a4a4a;">Power
                                up your marketing</h2>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Generate more
                                qualified leads on autopilot</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Make proactive contact with visitors.</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Boost your conversions
                            </p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Turn your traffic into paying
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Fourth Card -->
                <div class="p-4 w-[532px] h-[300px]">
                    <div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
                        <div
                            class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
                                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                        </div>
                        <div class="flex-grow">
                            <h2 class="text-gray-900 text-lg title-font font-medium" style="color: #4a4a4a;">
                                Smoothen your customer</h2>
                            <h2 class="text-gray-900 text-lg title-font font-medium mb-2" style="color: #4a4a4a;">
                                journey</h2>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Make proactive contact with visitors.</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Turn visitors into paying customers
                            </p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Qualify prospects automatically
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

我尝试了代码的变体，悬停时图像向上移动，但悬停效果无法按预期工作，并且图像不透明度更改未生效。有人可以帮我确定可能导致此问题的原因并提供解决方案以实现所需的悬停效果吗？

javascript html 悬停 tailwind-css

评论

0赞 CBroe 10/27/2023
“并且图像不透明度更改未生效” - 您定位了错误的元素。在包含图像的 div 元素上设置了类，而不是图像本身。因此，尝试在悬停时更改图像的不透明度没有任何作用。（它以前已经有了，因为这是默认值。opacity-40opacity: 1

答：

1赞 Watson Chen 10/27/2023 #1

效果不起作用，因为你的CSS选择器是错误的目标，现在结果是由div引起的，但你正在尝试控制img：

// your original code
.your-card:hover img 
   {
     transform: translate(0, -30px);
     transition: transform ease 0.5s;
     opacity: 1;
   }

原因是类名用，可以添加另一个类名，如下图所示：opacity-40

  1. 添加具有 opacity-40 的类名，例如：XDDDD
            vvvvv ADD HERE
<div class="XDDDD w-32 h-48 sm:mr-8 sm:mb-0 mb-4 flex rounded-full flex-shrink-0 left-0 absolute top-10 opacity-40 card-image ">

  <img src="./Image2-fotor-bg-remover-20231027103626.png" alt="ecommerce">
</div>
  1. 更改原始 CSS 以控制 div 的类名：XDDDD
.your-card:hover XDDDD 
   {
     transform: translate(0, -30px);
     transition: transform ease 0.5s;
     opacity: 1 !important;
   }

我认为它会:)

评论

1赞 Aaron Tauro 10/27/2023
谢谢你的解决方案。它现在工作正常。
0赞 HTMLNerd_1 10/29/2023 #2

您可以在简单的 JavaScript 中使用该属性，如下所示：mouseover

<script>
document.getElementsByClassName('your-card').addEventListener("mouseover", (event) => {
     //hover effect for ".your-card"
     document.getElementsByClassName('your-card').style.transform = "translateY(-10px)";
     //img opacity function
     document.querySelector('img').style.transform = "translate(0, -30px)";
     document.querySelector('img').style.transition = "transform ease 0.5s";
     document.querySelector('img').style.opacity = "1";
});
</script>

如果您需要更多帮助，请告诉我！

上一个：如何在子菜单打开时保持悬停处于启用状态

下一个：尝试从一张图片转到另一张图片时，悬停动画将不起作用