Web实现：伪类事件伪类搜索框悬停效果

最新推荐文章于 2025-06-15 09:38:41 发布

jasmyn518

最新推荐文章于 2025-06-15 09:38:41 发布

阅读量252

点赞数

分类专栏： HTML CSS 笔记文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122647134

版权

笔记同时被 3 个专栏收录

127 篇文章

订阅专栏

HTML

78 篇文章

订阅专栏

CSS

68 篇文章

订阅专栏

伪类搜索框悬停效果，鼠标悬停时元素变色。
HTML部分：

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

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css" type="text/css" media="all" />
</head>

<body>
    <div class="search-box">
        <input type="text" value="红米k20">
        <div>
            <span></span>
        </div>
    </div>
</body>

</html>

CSS部分代码：

body {
    margin: 0px;
}

.search-box {
    position: relative;
    box-sizing: border-box;
    width: 254px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

.search-box>input {
    box-sizing: border-box;
    border: none;
    height: 40px;
    width: 209px;
    outline: none;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #AEAEAE;
    padding-left: 20px;
}

.search-box>div {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 42px;
    width: 42px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    padding: 12px;
}

.search-box>div>span {
    display: block;
    width: 16px;
    height: 16px;
    background: url(./images/search-normal.png) no-repeat center;
    background-size: contain;
}

.search-box>div:hover {
    background: #FD6821;
}

.search-box>div:hover>span {
    background: url(./images/search-hover.png) no-repeat center;
    background-size: contain;
}