img:focus doesn't stay focus in CSS
Question
I want to make the image stay clicked.
I am using two images for each icon. one is when is not clicked. another is when is clicked. hover is working fine. but focus is not working at all.
i don't see any errors or mistakes. help me please!
this is body
body{ width:350px; } img { float:left; width:60px; height:50px; } #hardy{ float:right; } .category{ position: fixed; padding: 2em; left: 0; top: 0; background-color:white; /*Grey*/ padding:13px; height:57px; width:100%; display:inline-block; } .img-top { display:none; z-index:99; } #restaurant:hover .img-top{ display: inline; } #restaurant:hover .img-bottom{ display:none; } #restaurant.img-top:focus { display: inline; } #restaurant.img-bottom:focus { display: none; } #hotel:hover .img-top{ display: inline; } #hotel:hover .img-bottom{ display:none; } #pub:hover .img-top{ display: inline; } #pub:hover .img-bottom{ display:none; } #park:hover .img-top{ display: inline; } #park:hover .img-bottom{ display:none; } #tourism:hover .img-top{ display: inline; } #tourism:hover .img-bottom{ display:none; }
<div class="listView"> <div class="category"> <span id="restaurant"> <img src="./resources/icons/category/restaurant_list_icon.png" alt="restaurant" title="restaurant" class="img-bottom"> <img src="./resources/icons/category/restaurant_list_selected_icon.png" alt="restaurant" title="restaurant" class="img-top"> </span> <span id="hotel"> <img src="./resources/icons/category/hotel_list_icon.png" alt="hotel" title="hotel" class="img-bottom"> <img src="./resources/icons/category/hotel_list_selected_icon.png" alt="hotel" title="hotel" class="img-top"> </span> <span id="pub"> <img src="./resources/icons/category/pub_list_icon.png" alt="pub" title="pub" class="img-bottom"> <img src="./resources/icons/category/pub_list_selected_icon.png" alt="pub" title="pub" class="img-top"> </span> <span id="tourism"> <img src="./resources/icons/category/tourism_list_icon.png" alt="tourism" title="tourism" class="img-bottom"> <img src="./resources/icons/category/tourism_list_selected_icon.png" alt="tourism" title="tourism" class="img-top"> </span> <span id="park"> <img src="./resources/icons/category/park_list_icon.png" alt="park" title="park" class="img-bottom"> <img src="./resources/icons/category/park_list_selected_icon.png" alt="park" title="park" class="img-top"> </span> </div> </div>
it doesn't seem like focus is working. only hover is working. I've looked for the answer through googld but can't find.
can anyone have the answer why focus is not working? thank you!!!
3 answers
solution1
0 2017-11-22 07:35:48
Wrong Style You Added
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
Current Style is
#restaurant .img-top:focus {
display: inline;
}
#restaurant .img-bottom:focus {
display: none;
}
#restaurant ids main Div and .img-bottom is sub img tag
solution2
0 ACCPTED 2017-11-22 11:38:18
Use javascript instead. Here's a sample implementation for you. I've used text instead of image since I don't have images here, just replace those with your images.
HTML code should be like this
<ul>
<li><a href="" class="clickme" id="item1">Item 1 <!--add your original image here--></a></li>
<li><a href="" class="clickme" id="item2">Item 2 <!--add your original image here--> </a></li>
</ul>
CSS
.selected#item1{color:#f00; /*you can use background: url(yourimagepath); here instead of color */}
.selected#item2{color:#0f0; /*you can use background: url(yourimagepath); here instead of color */}
JS
$('.clickme').on('click',function(e){
e.preventDefault();
$('.clickme').removeClass('selected');
$(this).addClass('selected');
});
Here's a working sample in jsfiddle
solution3
0 2017-11-22 13:39:55
Hover and Click
Well the focus pseudo class wont work, because the hover pseudo class changes the state of the element when the cursor hovers away.
So in order to achieve this task we can create a custom class ( selected in the example below -- run the snippet ) using jquery and add or remove it on click events.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>peedikayil</title> <style> img{ width:200px; overflow:hidden; } .clickme:hover #item1{display: inline;} .clickme:hover #item2{display: none;} .clickme #item1{display:none;} .clickme #item2{display:inline;} .selected #item1{display:inline;} .selected #item2{display:none;} </style> </head> <body> <a href="" class="clickme"> <span id="item1"> <img src="http://www.clker.com/cliparts/3/7/7/f/1268838238959637666link-zelda_red_mini-hi.png" alt="restaurant" > </span> <span id="item2"> <img src="https://static.giantbomb.com/uploads/scale_small/0/5128/318633-zww_link11.jpg" alt="restaurant" > </span> </a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ var clicked = false; $('.clickme').on('click',function(e){ e.preventDefault(); this.clicked = !(this.clicked); if(this.clicked){ $('.clickme').addClass('selected'); }else{ $('.clickme').removeClass('selected'); } }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.