Question

我目前正在使用bootstrap和我自己的一些自定义css项目来测试html列表。对于最后一天，当单击具有自己的:active状态的子链接时，我一直坚持如何删除父:active状态。

下面是我的代码，我尝试更改z-index，并尝试使用jquery删除它，但没有运气。

我的主要目标是保持列表项悬停状态，但是一旦设置图标单击该项，就会返回正常视图。

任何帮助都会很棒。

＆＃13;

    .genericItem, .item img, .item .item-description, .item .item-settings {
       display: inline-block;
       vertical-align: middle;
    }

    /*List-group*/
    .list-group-item:hover,
    .list-group-item:focus {
      text-decoration: none;
      background-color: whitesmoke;
    }

    .list-group-item:active {
      background-color: #2980b9;
      Color: white;
    }

    /*Items*/
    .item {
      -webkit-user-select: none;
    }
    .item .item-description {
      margin-left: 5px;
    }
    .item .item-description p {
       margin-top: -4px;
    }
    .item .item-settings {
      color: black;
      text-decoration: none;
      float: right;
    }
    .item .item-settings:hover, .item .item-settings:focus {
      color: red;
      text-decoration: none;
    }
    .item .item-settings:active {
       color: green;
      text-decoration: none;
    }
    .item .item-settings:visited {
      color: black;
    }

＆＃13;

    <div class="list-group">
    <div class="list-group-item item">   
      <img src="https://cdn2.iconfinder.com/data/icons/files-color/104/46-files-console-32.png" alt="" />
      <div class="item-description">
        <h4 class="list-group-item-heading">Dev Console</h4>
        <p class="list-group-item-text"><i>Powershell Console, No Profile Loaded</i></p>
      </div>
      <a class="fa fa-cog item-settings" aria-hidden="true"></a>
    </div>
    <div class="list-group-item item">   
      <img src="https://cdn1.iconfinder.com/data/icons/miscellaneous-4/32/toolbox-32.png" alt="" />
      <div class="item-description">
        <h4 class="list-group-item-heading">Computer Management</h4>
      </div>
      <a class="fa fa-cog item-settings" aria-hidden="true"></a>
    </div>
</div>

＆＃13;

Answer 1

你应该改变你的使用结构javascript

这是我将如何更改结构的示例

HTML

<div class="list-group">
    <div class=" item">
      <div class="list-group-item">
        <img src="https://cdn2.iconfinder.com/data/icons/files-color/104/46-files-console-32.png" alt="" />
        <div class="item-description">
          <h4 class="list-group-item-heading">Dev Console</h4>
          <p class="list-group-item-text"><i>Powershell Console, No Profile Loaded</i></p>
        </div>
      </div>
      <a class="fa fa-cog item-settings" aria-hidden="true"></a>
    </div>
    <div class=" item">
      <div class="list-group-item item">
        <img src="https://cdn1.iconfinder.com/data/icons/miscellaneous-4/32/toolbox-32.png" alt="" />
        <div class="item-description">
          <h4 class="list-group-item-heading">Computer Management</h4>
        </div>
      </div>
      <a class="fa fa-cog item-settings" aria-hidden="true"></a>
    </div>
</div>

和CSS

/*List-group*/

.item > div:hover,
.item > div:focus {
  text-decoration: none;
  background-color: rgb(245, 245, 245);
}

.item > div:active {
  background-color: rgb(41, 128, 185);
  Color: white;
}

.item{
  position: relative;
}

.item > a{
  position: absolute;
  right: 15px;
  top: 10px;
}

示例：http://codepen.io/anon/pen/aBXGQy?editors=1111

单击子元素时如何删除元素活动状态

1 个答案: