当前位置： 移动技术网 > IT编程>网页制作>CSS > 利用css伪类选择器hover控制两个元素属性

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

2019年10月22日  | 移动技术网IT编程  | 我要评论

蔡元长,暴走大事件36期,临淄天气

示例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">
    <h3>tps:请将鼠标悬浮至搜索框和按钮上</h3>
    <form action="">
        <input type="text" class="searchiput1">
        <input type="submit" value="

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网