Geek Answers Handbook

Apply CSS style by clicking on the image

I am currently working on a small photo album. My plan is that if I click on the small thumbnail image, the border should appear and stay until I click on another image. In other words: the hang should remain active when I pressed it. Here is my code:

.images {
  float: left;
  margin-right: 10px;
  border: 1px solid silver;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 4px solid transparent;
}
.images img {
  height: 100px;
  width: auto;
}
.images:hover,
.images:target {
  border: 4px solid #009EE0;
}
.table {
  width: 40%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;
}
<div class="table">
  <div class="images" id="image_first">
    <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
  <div class="images">
    <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
</div>
Run codeHide result

I hope you help me! Thanks in advance, jan

+4
source share
4 answers

Use :focusand specify an attribute tabindex="1".

.images {
  float: left;
  margin-right: 10px;
  border: 1px solid silver;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 4px solid transparent;
}
.images img {
  height: 100px;
  width: auto;
}
.images:hover,
.images:active,
.images:focus,
.images:target {
  border: 4px solid #009EE0;
}
.table {
  width: 40%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;
}
<div class="table">
  <div class="images" id="image_first" tabindex="1">
    <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
  <div class="images" tabindex="1">
    <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
</div>
Run codeHide result

: , . , .images <div>. , <a> #hash-values, . , , :

<div class="images" id="image_first" tabindex="1">

:

<a class="images" id="image_first">

"" tabindex="1", :target, :focus :active. :)

+4

,

.images:hover,
.images:focus,
.images:target
{
  border: 4px solid #009EE0;
}

, : div, , , : https://css-tricks.com/almanac/selectors/f/focus/

0

, jQuery. jQuery.

$(document).ready(function(){
   $("img").click(function(){
      $(this).css({'border':'3px solid gren'});
   });

})
0

.images {
  float: left;
  margin-right: 10px;
  border: 1px solid silver;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 4px solid transparent;
}
.images img {
  height: 100px;
  width: auto;
}
.images:hover,
.images:target {
  border: 4px solid #009EE0;
}
.table {
  width: 40%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;
}
<div class="table">
  <a class="images" href="#image_first" id="image_first">
    <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </a>
  <a class="images" href="#image_second" id="image_second">
    <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
</a>
Hide result
0

More articles:


All Articles