Question

我尝试执行一项功能，即在进行“悬停”操作时阴影它发生在该类的所有按钮上，除此之外我不能给出id，因为按钮是根据通过转到数据基础的消息创建的，因此无法为每个按钮提供id通过jQuery选择它们然后我显示代码和结果。

我感谢你的帮助。

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

Answer 1

使用没有jquery的纯css可以实现这种阴影效果

HttpLoggingInterceptor logging = new HttpLoggingInterceptor();
    logging.setLevel(HttpLoggingInterceptor.Level.BODY);

    OkHttpClient.Builder httpClient = new OkHttpClient.Builder();
    httpClient.addInterceptor(logging).connectTimeout(10, TimeUnit.SECONDS);

    Retrofit retrofit = new Retrofit.Builder()
            .baseUrl("http://192.168.0.7/")
            .addConverterFactory(GsonConverterFactory.create())
            .addConverterFactory(ScalarsConverterFactory.create()).
                    client(httpClient.build()).build();

    Call<ResponseBody> call = retrofit.create(LinkltApi.class).requestTurn();
    call.enqueue(callback);

@GET("/F")
Call<ResponseBody> requestTurn();

.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);
}

我可以使用CSS等其他方法吗？

1 个答案: