css - HTML img tag with hover issue -


am having hard time trying figure why cannot images here change color on hover. images svg files , should adopt color. code:

html:

<div class="tooltile col-md-3">     <a href="#/cards">         <img src="ppt/assets/toolicons/requestnewcard.svg" >         <p>manage debit card</p>     </a> </div>         <div class="tooltile col-md-3">     <a href="#/recurclaim">         <img src="ppt/assets/toolicons/recurring.svg" >         <p>recurring claims</p>     </a> </div>  

and associated css:

.tooltile {     height: 200px;     float: left; }  .tooltile img {     color: #ab2328;     height: 100px;     width: 93px;     margin-left: auto;     margin-right: auto;     display: block; }  .tooltile img:hover {     color: yellow; } 

color related text elements, want border.

.tooltile img:hover {      border: yellow 1px solid;  }

here jsfiddle of it: https://jsfiddle.net/td70mqq5/

if thats not looking for, research on: svg {fill: currentcolor;} (https://css-tricks.com/cascading-svg-fill-color/)


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -