Question

目前我有3个图像，当它们盘旋时它们周围有一个边框，我想要的是当用户点击图像时，悬停的样式保留在该图像上，我尝试使用：活动但无效。

这是CSS代码：

.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}

.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}

和小提琴：http://jsfiddle.net/N22Jc/

Answer 1

：当用户在元素上按下鼠标时，激活仅保持有效。

您需要使用JavaScript来完成此任务。

Answer 2

试试这个，CSS：

fieldset{
border:0px; padding:0px;
}
img.style1{
border: 1px solid #e8ebef;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
img.style2{
border:1px solid #123;
box-shadow:none;

}

JavaScript（head）：

`function changeStyle(id, newClass){
        document.getElementById(id).className = newClass;
        }

        function changeOther1(newClass){
        document.getElementById("i1").className = newClass;
        }
}

HTML：

`<fieldset class="radios"><label for="one" class="label_radio">
                                <img src="yourimage.jpg" id="i1" class="style1" onclick="changeStyle(this.id, 'style2');">
                                <input name="number" id="one" value="" type="radio" /></label></fieldset>

我没有测试代码，但是你明白了。（我使用无线电，因为我假设你希望这些用于表格？）

Answer 3

如果您想通过点击一个元素来提供focus，那么与表单元素不同，它通常不需要焦点，您需要添加tabindex属性并将其设置为0要div或img能够在CSS :focus中重点关注并使用div。

在你的小提琴中，你在div上绘制一个边框，其中包含一个包含图像的链接。 tabindex没有:focus。

单击此框时，这是捕捉点击的链接，而不是div和图像，然后关闭，:target不可用。

如果结构允许您通过CSS DEMO执行此操作，则可以使用nth-child(x)。

而不是在演示中使用{{1}}，你可以在你的盒子上使用单个ID来清楚地选择它们，而不用考虑它们所处的数字位置。

Answer 4

如果您有兴趣并且这里有一个 FIDDLE

，这是一个jQuery解决方案

<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">

img {
  width: 150px;
  height: 150px;
  margin: 20px;
  cursor: pointer;
  border: 1px solid gray;
}
.active {
  border: 1px solid red;
}

<script>
  (function($) {   

    $('.item').click(function() {
      $(this).addClass('active').siblings('.item').removeClass('active');
    });

    /* Requires jQuery UI
    $('.item').click(function() {
      $(this).switchClass('item','active',300).siblings('.active').switchClass('active','item',300);
    }); 
    */

  })(jQuery);
</script>

* 注意：将脚本放在</body>标记之前。

当然，为了能够使用jQuery，您必须在HTML文档的<head>部分中包含jQuery库，如下所示

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <!-- And if you want to use script above which requires jQuery UI -->
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>

* 注意：您还可以下载jQuery＆amp; jQuery UI库，而不是CDN版本，您将能够加载本地版本。 Download jQuery - Download jQuery UI

如果您决定使用本地版本。下载它们，将它们放在您网站的根文件夹中，并将其包含在下面

中

<head>
  <script src="jquery-1.11.0.min.js"></script>
  <script src="jquery-ui-1.10.4.min.js"></script>
</head>

您也可以将库放在文件夹中，例如js或scripts，然后只需更改本地库版本的路径

<head>
  <script src="scripts/jquery-1.11.0.min.js"></script>
  <script src="scripts/jquery-ui-1.10.4.min.js"></script>
</head>

如果您决定使用jQuery，如果您有其他问题，请询问;）

制作点击的图像有一种风格

4 个答案: