zoukankan      html  css  js  c++  java
  • css设置兄弟节点的样式(相邻的前一个节点)

    产品需求:想在鼠标移动到“移除”的时候,“1.产品匹配测试”添加下划线和更改字体颜色

    需求分析:从需求可以看出使用 :hover 就可以解决的问题,但是在实践中发现兄弟选择器(+)不好使,(+)只能是之后的,那如果想要访问当前元素(假设为a)的前一个节点(假设为b)就不能了

    解决思路:对于相邻节点少的情况下可以将节点书写顺序颠倒(就是将a与b的位置换一下),然后在有排序就好啦,相关代码如下:

    <style>
    .history-desc{
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        cursor: pointer;
        text-indent: 26px;
        color: #666;
    }
    .history-desc>div{
        float: right;
    }
    .history-remove:hover + .history-name{
        text-decoration: underline;
        color: #333;
    }
    </style>

    <div class="history-desc"> <div class="history-remove">移除</div> <div class="history-name">1.产品匹配测试</div> </div>
  • 相关阅读:
    Storm 第一章 核心组件及编程模型
    四 Hive整合HBase
    Hbase第五章 MapReduce操作HBase
    swift 附属脚本
    swift 方法
    swift 属性
    swift 类和结构体
    swift 枚举类型
    swift 闭包
    Swift 函数
  • 原文地址:https://www.cnblogs.com/cap-rq/p/9964710.html
Copyright © 2011-2022 走看看