我可以用CSS等其他方法做到這一點嗎？

我試圖做一個函數，當做一個'懸停'陰影它發生在該類的所有按鈕，除此之外，我不能給一個id，因爲按鈕創建取決於去的新聞數據庫因此無法爲每個按鈕提供id來通過jQuery選擇它們，然後顯示代碼和結果。我可以用CSS等其他方法做到這一點嗎？

謝謝你的幫助。

jQuery函數

$('.btn-secondary').hover(function(){ 
    $('.btn-secondary').css('boxShadow', '0 15px 15px 0 rgba(0,0,0,0.24),0 17px 20px 0 rgba(0,0,0,0.19)'); 
}, function(){ 
     $('.btn-secondary').css('boxShadow', 'none'); 

})

container.php

<hr> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-1"></div> 
     <?php 
       $link=conectar(); 
          $dc=mysqli_query($link,"Select * from tbl_noticias_blog Order By id DESC limit 3");   
          while($titulo=mysqli_fetch_array($dc)){ 
      ?> 

      <div class="col-md-3"> 
       <h2> 
        <?php echo $titulo['titulo']; ?> 
        <input type="hidden" id="id" value="<?php echo $titulo['id'] ?>"> 
       </h2> 
       <p> 
        <?php echo utf8_encode($titulo['dcorta']); ?>. </p> 
       <button class="btn btn-secondary" onclick="irnoti(<?php echo $titulo['id'];?>);" role="button"><span>Ver detalles</span></button> 
      </div> 
      <?php 
          } 
      ?> 
    </div> 
    <br> 
    <br> 


</div>

它是如何顯示的影子： How it see

我想怎麼陰影： How i want

來源

2017-09-03 felipe andrade

我強烈建議[通過jQuery的API文檔閱讀]（HTTP：// api.jquery.com/）。它只需要一兩個小時，並立即支付你的時間。與'on'一樣，'hover'提供的元素引用爲'this'。 –

你可以用純css做到這一點，而不使用jquery –

感謝您接受答案，也請投我的答案 –

使用純CSS沒有的jQuery，你可以做到這一點陰影效果

.shadow_effect{ 
 
background-color:#727b84; 
 
color:#fff; 
 
border-radius:2px; 
 
border:none; 
 
padding:5px 5px; 
 
} 
 
.shadow_effect:hover{ 
 
box-shadow:0 15px 15px 0 rgba(0,0,0,0.24),0 17px 20px 0 rgba(0,0,0,0.19); 
 
}

<button class="shadow_effect">Button 1</button> 
 
<button class="shadow_effect">Button 2</button>

來源

2017-09-03 15:59:25

謝謝我的問題與我的問題回答!!我使用jquery來嘗試不同種類的想法，但在CSS上很容易。 –

歡迎大家投票選出答案plz –

im lvl1 cant upvote srry –

我可以用CSS等其他方法做到這一點嗎？

回答

相關問題