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

程序员文章站 2023-12-25 08:59:15

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

示例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="

打赏

微信扫一扫

com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details

1.错误显示 com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for... [阅读全文]
互斥那点事儿（下）

“我找到好办法了！” 没有想到，说话的人竟然是磁盘！进程调度器瑟瑟的说：“你有方法？还是算了吧，我怕用你的方法操作系统要乱套了。” 磁盘委屈的道：... [阅读全文]
css 层叠样式表

CSS: 层叠样式表 style:样式修饰和美化整个网页，实现各种不同的网页布局风格行内样式的优先级最高内部样式和外部样式并没有明确的优先级，... [阅读全文]
mpvue快速入门

主要特性使用开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：彻底的组件化开发能力：提高代码复用性完整的开发体验方便的数据管... [阅读全文]
css———理解height与line_height

定义 height指的是块级别元素的高度； line-height指的是元素内容的高度。 height和line-height的联系 CSS中起高度... [阅读全文]