Question

我有一个程序，允许用户选择一些图像，我给了他们伪类

.my_image_clas:hover{
 border:3px solid blue;
-webkit-box-sizing: border-box; }

当指针经过时，使它们被边框包围（给出一个＆＃34;选择的效果＆＃34;）。即使我选择了图片，我也希望保持这种效果，例如：

我怎样才能做到这一点？（使用javascript）

Answer 1

你可以在这里使用jQuery来悬停效果，jQuery提供了hover（）伪事件，它的行为比moueseenter / mouseleave更好。另外，为每个状态（正常和悬停）创建一个CSS类是个好主意，然后在悬停时更改类：

<head>
<script src="jquery-1.12.0.min.js"></script>
</head>

@Francesco Monti我已经阅读了你的评论。

使用jquery你可以在你的html的head标签下添加jquery.js

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

或在线添加

$(document).ready(function()

您可以在脚本标记下使用git branch。

如果你想要，你可以分开js＆amp; css文件并相应地包含这些文件。

Answer 2

仅限CSS＆＃34; hack＆＃34;

首先，这个问题要求使用仅限CSS的解决方案，而正如其他人所说的那样，如果没有JavaScript，它实际上不可能达到你的要求，但是只有一个CSS黑客攻击：

＆＃13;

img {
  margin: 3px;
  width: 100px;
}
img:hover, img:target {
  border: 3px solid green;
  margin: 0;
}

＆＃13;

<a href="#a"><img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" /></a>
<a href="#b"><img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" /></a>

＆＃13;

它的工作原理是让你的图像成为点击它们所包含的锚点的目标。我们可以设置链接目标的元素，因为我们在CSS中有一个选择器。

请注意，这样您只能选择一张图片。

Pure JavaScript

如果你想用JavaScript做，你可以使用下面的代码：

＆＃13;

function select(element) {
  element.onclick = function() {
    element.classList.toggle('selected');
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

＆＃13;

img {
  margin: 3px;
}
.selected {
  border: 3px solid green;
  margin: 0;
}

＆＃13;

<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />

＆＃13;

它的工作原理是在点击时为类selected的每个元素切换名为selectable的类。此外，它还可以让您选择多个项目。

如果您想限制用户只选择一个元素，请将上面的JavaScript更改为：

function select(element) {
  element.onclick = function() {
    var selected = document.getElementsByClassName('selected')[0];
    if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
    if (element !== selected) { element.classList.add('selected'); }
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

Answer 3

你的近似CSS：

.item {
    box-sizing: border-box;
    border: 2px solid transparent;
}

.item.selected,
.item:hover,
.item:focus {
    border: 2px solid blue;
}

一些基本的jQuery：

$('.item').on('click', function (event) {
    event.preventDefault(); // Prevent default behavior if .item is a link or button

    $(this).toggleClass('selected');
})

保持选中的图像

3 个答案:

仅限CSS＆＃34; hack＆＃34;

Pure JavaScript