1

I try to do a function which when doing a 'hover' shadowing it happens with all the buttons of that class, besides this I can not give an id since the buttons are created depending on the news that go up by going to the base of data therefore could not give id's to each button to select them by jQuery then I show the code and the result.

I thank you for the help.

jQuery function

 $('.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 shows the shadow: How it see

How I want the shadow: How i want

4
  • I strongly recommend reading through the jQuery API documentation. It only takes an hour or two, and pays you back that time immediately. As with on, hover provides the element reference as this. Commented Sep 3, 2017 at 15:52
  • 1
    You can do this with pure css ,without using jquery Commented Sep 3, 2017 at 15:53
  • Thanks for accepting the answer, plz up vote my answer too Commented Sep 3, 2017 at 16:05
  • T.J. Crowder i was not tryng to replay i was tryng to found a solution and i got it. thanks Commented Sep 3, 2017 at 16:11

1 Answer 1

0

Using pure css without jquery you can achieve this shadow effect

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

Sign up to request clarification or add additional context in comments.

4 Comments

thanks i question my problem with ur answer!!, i was using jquery to try diferents kinds of thinks but on css was really easy.
Welcome give an up vote to the answer plz
im lvl1 cant upvote srry
Ok friend thanks and happy coding, always find a way through css, if he cant help get the help of jQuery, (CSS is smooth in case of animation and effects)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.