將鼠標懸停在按鈕上時顯示圖像

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>