如何实现带图标的CardView下拉悬停效果？代码求助

API 探路者

2026-7-9

修正后的CardView下拉悬停实现

核心修改点

补全.service-option的布局样式，实现图标+文字的横向排列与CardView效果
修正CSS选择器匹配问题（原代码针对a标签但HTML用的是div）
优化下拉菜单的间距与hover交互
统一导航按钮的样式，避免视觉不一致

修正后的完整代码

HTML（仅需调整Font Awesome路径，其余不变）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <!-- 替换为你的Font Awesome实际路径 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Agrisense360</title>
</head>

<body>
    <header>
        <div class="logo-container">
            <img src="images\bckgrd.jpg" alt="Agrisense360 Logo">
        </div>
        <div class="navigation">
            <div class="services-container">
                <div class="nav-button">Services</div>
                <div class="service-dropdown">
                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-wrench"></i>
                        <div class="service-text">
                            <h4>Electronic Sensor Installation and Setup</h4>
                            <p>Provide farmers with the hardware and expertise needed to install electronic sensors
                                in their fields.</p>
                        </div>
                    </div>

                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-line-chart"></i>
                        <div class="service-text">
                            <h4>Data Analytics and Insights</h4>
                            <p>Provide farmers with recommendations based on the data collected, such as when to
                                irrigate, when to apply fertilizers, and when to take pest control measures.</p>
                        </div>
                    </div>
                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-dashboard"></i>
                        <div class="service-text">
                            <h4>Real-Time Monitoring and Data Collection</h4>
                            <p>Subscription-based service where farmers can access real-time data from the sensors
                                installed in their fields.</p>
                        </div>
                    </div>
                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-users"></i>
                        <div class="service-text">
                            <h4>Crop Management Consulting</h4>
                            <p>Personalized consulting services to farmers based on the data and insights gathered
                                from their fields.</p>
                        </div>
                    </div>
                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-cogs"></i>
                        <div class="service-text">
                            <h4>Integration with Farm Equipment</h4>
                            <p>Partnerships with agricultural equipment manufacturers to integrate your technology.
                            </p>
                        </div>
                    </div>
                    <div class="service-option" onclick="window.location.href='#'">
                        <i class="fa fa-file-text"></i>
                        <div class="service-text">
                            <h4>Customized Reports</h4>
                            <p>Customized reports for farmers that summarize the performance of their crops over
                                time.</p>
                        </div>
                    </div>
                </div>
            </div>


            <a href="#" class="nav-button">About Us</a>
            <a href="#" class="nav-button">Contact Us</a>
        </div>
        <div class="user-actions">
            <button class="rounded-button" id="login">Log In</button>
            <button class="rounded-button" id="register">Register</button>
        </div>

    </header>

    <div class="content">
        <div class="text">
            </p>
            <h3>Agrisense360,</h3>
            <p>Optimizing Crop Yield with Electronic Sensors,<br>
                Ushering in an era of data-driven decision-making.</p><br>

            <p>Giving our farmers the tools, they need to make choices
                rooted in information and foresight:</p><br>

            <p id="typing-text"></p><br>
        </div>

        <div class="right-image">
            <img src="images\sensorview1.webp" alt="Large Image">

        </div>
    </div>


    <button id="get-in-touch">Get in touch with us</button>

    <footer>
        <p>&copy; 2023 Agrisense360. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>

</html>

CSS（替换原styles.css内容）

/* Basic styling for the header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
}

/* Navigation button styles */
.nav-button {
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    margin: 0 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.nav-button:hover {
    background-color: #444;
    border-radius: 4px;
}

/* Rearrange the button positions */
.user-actions {
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
}

.rounded-button {
    background-color: #007bff;
    color: #fff;
    padding: 5px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

/* Footer styles */
footer {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

/* Content container */
.content {
    display: flex;
    flex-direction: row;
    margin: 20px;
}

.text {
    flex: 1;
    padding: 20px;
}

.text h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.text p {
    font-size: 16px;
    margin-bottom: 10px;
}

.right-image {
    width: 50%;
    margin-top: 20px;
    margin-right: 40px;
}

.right-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Services dropdown styles */
.services-container {
    position: relative;
    display: inline-block;
}

.service-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 400px;
    overflow: hidden;
}

/* Show dropdown on hover */
.services-container:hover .service-dropdown {
    display: block;
}

/* Service option CardView styles */
.service-option {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.service-option:last-child {
    border-bottom: none;
}

.service-option:hover {
    background-color: #f8f9fa;
}

.service-option i {
    font-size: 24px;
    color: #007bff;
    margin-right: 12px;
    margin-top: 4px;
}

.service-text h4 {
    margin: 0 0 6px 0;
    color: #333;
    font-size: 14px;
}

.service-text p {
    margin: 0;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

/* Get in touch button */
#get-in-touch {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

JavaScript（修正选择器问题）

// Text to be typed in a typing animation
const textLines = [
    "Accurate and timely data that guides their decisions",
    "Increased crop yield and quality",
    "Reduced use of fertilizers and pesticides",
    "Improved resilience to weather and other external factors",
    "Enhanced data-driven decision-making",
    "Empowering farmers to make informed choices about their crops"
];

const typingText = document.getElementById("typing-text");
let textIndex = 0;
let charIndex = 0;
let isDeleting = false;

// Function to simulate a typing animation
function typeText() {
    const currentLine = textLines[textIndex];
    if (!isDeleting) {
        typingText.textContent += currentLine.charAt(charIndex);
        charIndex++;
        if (charIndex >= currentLine.length) {
            isDeleting = true;
            setTimeout(() => typeText(), 1000);
        } else {
            setTimeout(() => typeText(), 50);
        }
    } else {
        typingText.textContent = currentLine.substring(0, charIndex);
        charIndex--;
        if (charIndex < 0) {
            isDeleting = false;
            textIndex = (textIndex + 1) % textLines.length;
            setTimeout(() => typeText(), 500);
        } else {
            setTimeout(() => typeText(), 50);
        }
    }
}

// Start the typing animation
typeText();

// 修正选择器，只选中Services按钮
const servicesButton = document.querySelector(".services-container .nav-button");
const serviceDropdown = document.querySelector(".service-dropdown");

// 可移除JS的hover事件，改用CSS的:hover实现更稳定

说明

CardView效果实现：通过.service-option的flex布局，将图标与文字横向排列，配合内边距、边框和hover背景色，实现卡片式外观。
下拉触发优化：改用services-container:hover .service-dropdown的CSS选择器，比JS事件更稳定，避免鼠标移出时的闪烁问题。
样式统一：给所有.nav-button添加了统一的文字颜色、padding和hover效果，保持导航栏视觉一致性。
交互体验：优化了下拉菜单的阴影、圆角和选项间距，提升整体质感。

内容的提问来源于stack exchange，提问作者Prince Sein

如何实现带图标的CardView下拉悬停效果？代码求助

核心修改点 #

修正后的完整代码 #

HTML（仅需调整Font Awesome路径，其余不变）

CSS（替换原styles.css内容）

JavaScript（修正选择器问题）

说明 #

核心修改点

修正后的完整代码

说明