温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用css伪类选择器hover控制两个元素属性

发布时间:2022-03-02 14:43:01 来源:亿速云 阅读:1052 作者:小新 栏目:web开发

小编给大家分享一下如何利用css伪类选择器hover控制两个元素属性,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

利用css伪类选择器hover控制两个元素属性

示例1:

<html>
<body>
<style>
    #a:hover {color : #FFFF00;}
    #a:hover > #b:first-child{color : #FF0000;}    
    #a:hover > #b{color : #FF00FF;}  
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

示例2:

<html>
<body>
<style>
.header-bar-search {
    width: 300px;
    height: 50px;
    font-size: 16px;
    margin-top: 100px;
    margin-left: 40%;
}
.header-bar-search input{
    display: inline-block;
    height: 50px;
    outline: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    transition: border-color .3s linear,color .3s linear,background-color .3s linear;
}
.header-bar-search .searchIput1 {
    width: 250px;
    padding: 0 10px;
    border-right: none;
}
.header-bar-search .searchIput2 {
    float: right;
    width: 50px;
    font-size: 20px;
}
.searchIput1:hover{
    border-color: #ff6700;
}
.searchIput2:hover{
    color: #fff;
    background: #ff6700;
}
.searchIput1:hover + .searchIput2{
    border-color: #ff6700;
}
</style>
<div class="header-bar-search">
    <h4>tps:请将鼠标悬浮至搜索框和按钮上</h4>
    <form action="">
        <input type="text" class="searchIput1">
        <input type="submit" value="??" class="searchIput2">
    </form>
</div>
</body>
</html>

Feedback:利用hover控制两个元素可以达到不用js也能写出简易的下拉菜单、向下弹出二维码或者输入框颜色整体变化 
提示等小特效。
注意:在使用过程中触发选择器只能写需要触发元素本身的选择器

不能用

父元素选择器1 子元素选择器1:hover, 父元素选择器2 子元素选择器2:hover{color:red;}

的写法

建议用

元素选择器 1:hover + 元素选择器 2{color:red;}

元素选择器 1:hover{color:red;}

的写法

看完了这篇文章,相信你对“如何利用css伪类选择器hover控制两个元素属性”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI