Question

我正在制作一个小相册。我的计划是，如果我点击小缩略图图像边框应该出现并保持到我点击另一张图像为止。换句话说：当我点击它时，悬停应该保持活动状态。这是我的代码：

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

希望你能帮助我！提前谢谢，jan

Answer 1

使用:focus并提供tabindex="1"属性。

＆＃13;

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

＆＃13;

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

＆＃13;

更新：感谢Ivan Karaman指出这一点。我注意到的一件事是，您使用.images作为<div>。虽然这可能完美有效，但最好使用<a>生成#hash-values，方法是将它们放在链接中。所以，如果你替换下面的代码会更好：

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

有了这个：

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

而且你也不需要＆＃34; hack＆＃34; tabindex="1"也是如此，因为默认情况下链接始终包含:target，:focus和:active状态。 :)

Answer 2

主动和专注可能会成功

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

似乎你可以使用：专注于div，但也许不是：活跃 https://css-tricks.com/almanac/selectors/f/focus/

Answer 3

为此，您应该使用jQuery。尝试一些jQuery代码。

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

})

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

单击图像应用CSS样式

4 个答案: