默认情况下，在网页中选择一个项目

Question

当我在那个时候悬停鼠标时我得到了效果但是我想在页面加载时将一个图像设置为默认选择。 任何人都帮助我。

这是我的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;
}

这是我的PHP代码。

    <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

将类selected添加到所需的img元素中，如此

$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; ?>">
}

并使用此css

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

这将有效：）

Answer 2

将selected添加到您的defult图像的类中。默认图像的所需输出：

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

如果您无法对其进行硬编码或从PHP端执行此操作，请使用此JQuery代码将类selected添加到第一个图像：

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

然后将此JQuery代码添加到您的页面：

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

它应该工作。必须包含JQuery。

Answer 3

试试这个： 需要添加任何最小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>

您也可以使用.hover而不是.mouseover