利用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>
<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>

<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="🔍" class="searchIput2">
    </form>
</div>
</body>
</html>
<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="🔍" class="searchIput2">
    </form>
</div>
</body>
</html>

<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></h3><form action=””><input type=”text” class=”searchIput1″><input type=”submit” value=”🔍” class=”searchIput2″></form></div></body></html>

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

FeedbackFeedbackhover控制两个元素hover控制两个元素

注意注意

不能用这样的写法:

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

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

 

建议用这样的写法:

触发元素选择器 :hover  +  被触发元素选择器 {color:red;}(从第一个上面的示例来看被触发元素选择器最好是触发元素选择器“兄弟”同级或者“兄弟的后代”同级的子级

触发元素选择器 :hover  +  被触发元素选择器 {color:red;}元素选择器 {color:red;}被触发元素选择器触发元素选择器“兄弟”同级或者“兄弟的后代”同级的子级或者

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

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

 

» 本文来自:前端开发者 » 《利用css伪类选择器hover控制两个元素属性_晴枙_前端开发者》
» 本文链接地址:https://www.rokub.com/73798.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!