I have a program which allows the user to select some images and i gave them the pseudo class

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

to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :

How can i achieve this? (With javascript)

I have a program which allows the user to select some images and i gave them the pseudo class

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

to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :

How can i achieve this? (With javascript)

• javascript
• html
• css

• you need javascript for this. you cant handle it only with css. – osanger Commented Feb 29, 2016 at 16:51
• You can't do that with CSS...you need Javascript. – Paulie_D Commented Feb 29, 2016 at 16:51
• Ok no problem, some advice with javascript? – Francesco Monti Commented Feb 29, 2016 at 16:52
• 1 my advice: transform your markup into a regular form with checkbox and/or radiobox, and place those images as content of your labels (with a for attribute) . Use the :checked pseudoclass to style the label with the border, so javascript is not necessary at all. So try this approach and if you're stuck on some problem edit your question and share your code – Fabrizio Calderan Commented Feb 29, 2016 at 16:54
• 1 You can do it with CSS... in fact some might argue it's better as then you can treat the images as radio buttons or checkboxes. – alex Commented Feb 29, 2016 at 16:54

3 Answers 3

CSS-only "hack"

At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:

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

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

It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.

Note that this way you can select only one image.

Pure JavaScript

If you want to do it with JavaScript though, you can use below code:

function select(element) {
  element.onclick = function() {
    element.classList.toggle('selected');
  }
}

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

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

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

It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.

If you want to limit the user to selecting only one element though, change the above JavaScript to:

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

You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:

$(document).ready(function() {
    $(".my_image_clas").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

.my_image_clas.Hover { border: 3px solid blue; }

@Francesco Monti I've read your ment.

for working with jquery you may add jquery.js under the head tag of your html

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

or adding online would be

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

and you can use $(document).ready(function() under the script tags.

If you want you can separate js & css files and includes those files accordingly.

Your approx CSS:

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

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

Some basic jQuery:

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

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