默認情況下，在網頁

選擇一個項目當我在那個時候我得到了效懸停鼠標，但我想設置一個圖像作爲默認選擇時，頁面加載。任何人都可以幫助我。

這是我的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>

來源

2014-09-11 Vijay Barbhaya

，做你想要的效果是這樣的'箱陰影的CSS：0像素0像素10px的＃BFCBD5;'。 – 2014-09-11 06:54:44

是的，我得到了慾望的影響 – 2014-09-11 06:55:20

那麼，只需將它添加到您的默認圖像，然後，要刪除它，當另一個圖像被徘徊，通過JavaScript使'box-shadow：none;'。 – 2014-09-11 06:56:58

類selected添加到這樣

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

所需的img元素，並使用這個CSS

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

這將工作:)

來源

2014-09-11 07:00:23

我通過數據庫在foreach循環中獲取圖像 – 2014-09-11 07:04:42

當我寫選中，然後所有圖像選擇 – 2014-09-11 07:05:06

使其條件的一個標誌，以便它只被添加到第一圖像。 – 2014-09-11 07:05:46

添加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必須包含在內。

來源

2014-09-11 07:07:08

試試這個：需要添加任何最小的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

來源

2014-09-11 07:14:36 herr

默認情況下，在網頁

回答

相關問題