By default one item selected in webpage

Question

When i hover mouse at that time i got the effect but i want to set one image as a by default select when page is load. Anyone Help me.

Here is my css.

.simpleLens-thumbnails-container a{
     display: inline-block;
}
.simpleLens-thumbnails-container a img{
    display: block;
}
.all-thumb{
    width:50px !important;
}
#demo .img{
    border: 5px solid #000;
} 
.all-thumb:hover{
    box-shadow: 0px 0px 10px #BFCBD5;
}

Here is my PHP code.

    <a href="#" id="demo" class="simpleLens-thumbnail-wrapper" data-lens-image="<?php echo $img; ?>"     data-bigimage="<?php echo $img; ?>">
                    <img class="all-thumb" id="demo" src="<?php echo $img; ?>">
                </a>

Answer 1

add a class selected to the desired img element like this

$first_item = true;
foreach (............)
{
   if($first_item){
       <img class="all-thumb selected" id="demo" src="<?php echo $img; ?>">
      $first_item = false;
       }
   else
      <img class="all-thumb" id="demo" src="<?php echo $img; ?>">
}

and use this css

.all-thumb.selected, .all-thumb:hover{
    box-shadow: 0px 0px 10px #BFCBD5;
}

this will work :)

Answer 2

Add selected to your defult image's class. Desired output for the default image:

<img class="all-thumb selected" id="demo" src="<?php echo $img; ?>">

If you can't hardcode it or do it from the PHP side, use this JQuery code to add the class selected to the first image:

$('.all-thumb:first').addClass('selected');

Then add this JQuery code to your page:

<script>
    $(".all-thumb").not(".selected").hover(function(){
      $(".all-thumb selected").css("box-shadow","none");
      },function(){
      $(".all-thumb selected").css("box-shadow","0px 0px 10px #BFCBD5");
    });
</script>

It should work. JQuery must be included.

Answer 3

Try this: Need to add any minimum jquery.

<script src="js/jquery-1.7.1.min.js"></script> 
<script>
    $(document).ready(function(){

            $('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', '0px 0px 10px #BFCBD5');

            $('.simpleLens-thumbnail-wrapper .all-thumb').mouseover(function(){
                $('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', 'none');
            });

            $('.simpleLens-thumbnail-wrapper .all-thumb:first').mouseover(function(){
                $('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', '0px 0px 10px #BFCBD5');
            });
});
</script>

you can also use .hover instead of .mouseover