Question

我想在没有选择或悬停时隐藏图像，并在悬停或选择按钮时显示图像。图像是功能，因此我无法将其作为背景图像。

我认为可能具有可见性：隐藏和可见性：悬停时显示和选择可能有效，但我还没有成功。

没有jquery或javascript，也许只有css才有可能。

＆＃13;

input[type="checkbox"]:focus + label {
  background-color:#16bdcf;
}

#template:hover , #template:focus #template.selected{
  background-color:#16bdcf;
}

#template.selected{
  /* background-color:red; */
  color: #fff;
}
#template:hover * , #template:focus * {
  background-color:#16bdcf;
  color: #fff;
}

#template > h3 > input[type="checkbox"] {
  margin: 0px 10px 0px 0px;
}
#template {
  width: 100%;
}

＆＃13;

<li ng-repeat="contactlist in contactlists | filter:query" class="ng-scope" style="">
  <button id="template" ng-click="open(contactlist)">
    <h5 class="ng-binding">2 days ago</h5>
    <h3 class="ng-binding"><input type="checkbox">name</h3>
    <span><img class="swhite" src="images/Share_white.png"></span>
    <span ng-click="deleteContactList(contactlist)"><img class="twhite" src="images/Trash_white.png"></span>
    <p class="ng-binding">5 CONTACTS</p>
  </button>
</li>

＆＃13;

Answer 1

默认情况下，您可以隐藏span s（包含img）：

#template span {  // hide at default
    display: none; 
}

然后显示你想要的#template的各种状态：

#template.selected span, // show on state change
#template:hover span, 
#template:focus span, 
#template.selected span { 
    display: block; 
}

如果这会破坏您的布局，您可以改为使用visibility属性：

#template span {  // hide at default
    visibility: hidden;
}

然后显示你想要的#template的各种状态：

#template.selected span, // show on state change
#template:hover span, 
#template:focus span, 
#template.selected span { 
    visibility: visible;
}

完整代码段...

＆＃13;

input[type="checkbox"]:focus + label {
background-color:#16bdcf;
    }

#template span { display: none; } // hide at default

#template:hover , #template:focus #template.selected{
    background-color:#16bdcf;
}

#template.selected span, #template:hover span, #template:focus span, #template.selected span { display: block; } // show on state change

#template.selected{
    /* background-color:red; */
    color: #fff;
}
#template:hover * , #template:focus * {
    background-color:#16bdcf;
    color: #fff;
}

#template > h3 > input[type="checkbox"] {
    margin: 0px 10px 0px 0px;
}
#template {
    width: 100%;
}

＆＃13;

<li ng-repeat="contactlist in contactlists | filter:query" class="ng-scope" style="">
          <button id="template" ng-click="open(contactlist)">
            <h5 class="ng-binding">2 days ago</h5>
            <h3 class="ng-binding"><input type="checkbox">name</h3>
            <span><img class="swhite" src="images/Share_white.png"></span>
             <span ng-click="deleteContactList(contactlist)"><img class="twhite" src="images/Trash_white.png"></span>
            <p class="ng-binding">5 CONTACTS</p>
           </button>
        </li>

＆＃13;

悬停按钮时显示图像

1 个答案: