将鼠标悬停在按钮上时显示图像

Question

我想在没有选择任何内容或悬停时隐藏图像，并在悬停或选择按钮时显示图像。图像是功能，所以我不能把它作为背景图像。

我想也许有可见性：隐藏和可见性：显示在悬停和选定的可能是工作，但我还没有成功。

没有jQuery或JavaScript，也许只是与CSS可能。

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%; 
 
}

<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>

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; 
} 

全部片段块...

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%; 
 
}

<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>