Loading

CSS小知识---伪类选择器触发两个元素样式

使用伪类选择器:hover配合相邻兄弟选择器+，实现鼠标触发一个元素，响应两个元素的样式。

代码如下：

  <style>
    .header-bar-search {
      display: inline-block;
      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 {
      height: 52px;
      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>
<body>
  <div class="header-bar-search">
    <h3>tps:请将鼠标悬浮至搜索框和按钮上</h3>
    <input type="text" class="searchIput1">
    <input type="submit" value="🔍" class="searchIput2">
  </div>
</body>
posted @ 2019-10-21 23:07  mx羽林  阅读(3345)  评论(0)  编辑  收藏  举报