jq实现鼠标悬停高亮当前图片

拼搏现实的明天。 2023-06-05 08:09 2阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        *{margin: 0;padding: 0;}
        body {background-color: black;}
      .box {
        margin: 100px auto;width: 630px;height: 394px;
        border: 2px solid white; background-color: black;
        padding: 10px;
      }
      ul {list-style: none;}
      ul li {
        float: left; padding: 5px;
      }
      </style>
    </head>
    <body>
    <div class="box">
      <ul>
        <li><a href="#"><img src="images/01.jpg"></a></li>
        <li><a href="#"><img src="images/02.jpg"></a></li>
        <li><a href="#"><img src="images/03.jpg"></a></li>
        <li><a href="#"><img src="images/04.jpg"></a></li>
        <li><a href="#"><img src="images/05.jpg"></a></li>
        <li><a href="#"><img src="images/06.jpg"></a></li>
      </ul>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
      $(function(){
        $("li").mouseenter(function(){
          $(this).css("opacity","1").siblings().css("opacity","0.4");
        });
        $("li").mouseleave(function(){
          $("li").css("opacity","1");
        });
      });
    </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/sandraryan/p/11072392.html

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现鼠标悬停变色

JS实现鼠标悬停变色案例池子： [JS实现鼠标悬停变色 ][JS_] [JavaScript中的排他算法实现按钮单选][JavaScript] [Jav

你的名字/ 2024年03月31日 16:06/ 0 赞/ 67 阅读

相关 css 实现鼠标悬停放大

.qr-code:hover { transform: scale(1.5); // 放大1.5倍 transition: a

迷南。/ 2023年10月06日 09:19/ 0 赞/ 34 阅读

相关 css实现鼠标悬停改变图片

样式： <style> .bshApp img:hover{ content:url('bshsjjscpdf/bsh_four_

桃扇骨/ 2023年10月03日 19:59/ 0 赞/ 60 阅读

相关 jq实现鼠标悬停高亮当前图片

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

拼搏现实的明天。/ 2023年06月05日 08:09/ 0 赞/ 3 阅读

相关鼠标悬停放大图片特效

鼠标悬停放大图片 ![在这里插入图片描述][format_png_pic_center] 鼠标悬停放大图片是个比较吸引人的特效。废话我就不多说了，直接上结局办法。

不念不忘少年蓝@/ 2023年05月21日 07:07/ 0 赞/ 28 阅读

相关 Vue初体验：鼠标悬停控制元素高亮效果

使用变量location记录鼠标悬停的行，在遍历列表时比对index与location是否一致来控制高亮 <!DOCTYPE html> <html lang

一时失言乱红尘/ 2023年03月03日 08:42/ 0 赞/ 3 阅读

相关 echarts鼠标悬停发光高亮

关键代码： > //鼠标悬停时： > emphasis: { > itemStyle: { > // color: '333FFF

曾经终败给现在/ 2023年01月15日 03:41/ 0 赞/ 464 阅读

相关 html5鼠标悬停图片变淡,HTML5实现网页图片鼠标悬停黑白变换效果

使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者：感谢达西·克拉克

深碍√TFBOYSˉ_/ 2022年10月06日 00:57/ 0 赞/ 245 阅读

相关 jq利用replace()方法实现关键字高亮显示

//1.获取要高亮显示的行 var rowNode = $('.highlightRow'); //2.获取搜索的内容 var searchCo

秒速五厘米/ 2022年04月03日 08:10/ 0 赞/ 405 阅读

相关 css实现鼠标悬停效果

![在这里插入图片描述][20200527151344896.gif] 感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的

浅浅的花香味﹌/ 2021年07月27日 01:57/ 0 赞/ 596 阅读