个人中心
gpt4 book ai didi

jquery - 如何切换 :hover effect?

转载 作者：太空宇宙 更新时间：2023-11-04 14:50:56 28 4
gpt4 key购买 nike

我正在尝试切换我在 laravel 5 中使用 scss 制作的悬停效果。

当我将鼠标悬停在我案例中的内容(专辑封面图片)上时，它会产生这种效果。

但我希望效果在选中标记时激活。我现在处于无法添加或切换悬停效果的地步。我尝试添加一个类，但效果变得很奇怪。

这是codepen链接

**https://codepen.io/Edris89/pen/zJZEma**

这是我使用的代码。我将其放入以备将来供他人使用。

这是 HTML 代码。

    <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

</head>
<body>

  <div class="container">
    <div class="row">
                <div class="col-lg-2" id="album-{{ $album->id }}">
                    <div class="content" id="content" >
                      <a id="overlay">
                        <div class="content-overlay">
                            <div class="col-lg-2">
                                <label class="checkbox_custom">
                                    <input type="checkbox" name="checkbox_custom_a" id="{{$album->id}}">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>

                        <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
                        <div class="content-details fadeIn-bottom">
                          <h3 class="content-title"></h3>
                          <p class="content-text"></p>
                        </div>
                      </a>
                    </div>
                    <br>
                </div>
        </div>
  </div>


  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
  </script>

  <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>


</body>
</html>

这是scss代码。

.container .title{
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 0.6;
}



.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

最后是 jquery 代码。

$( "input" ).change(function() {
            var $input = $( this );
            var checkboxState = $input.prop("checked");

            if(checkboxState == true){
                $("input:checkbox:checked").each(function () {
                    //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
                    //Cant figure out????
                });
            }

            if(checkboxState == false){
                $("input:checkbox:checked").each(function () {
                    //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());

                });
            }
        }).change();

最佳答案

实现此目的的最佳方法是添加一个与 :hover 效果具有相同 CSS 的新类。

我在其中添加了一个 .checked 类。

.content:hover .content-overlay,
.content.checked .content-overlay {
  opacity: 0.6;
}

然后在您的 Javascript 中，您需要切换类。

$("input")
  .change(function() {
    var $input = $(this);
    var checkboxState = $input.prop("checked");

    if (checkboxState == true) {
      $(".content").addClass("checked");
      $("input:checkbox:checked").each(function() {
        //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
        //Cant figure out????
      });
    }

    if (checkboxState == false) {
      $(".content").removeClass("checked");
      $("input:checkbox:checked").each(function() {
        //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
      });
    }
  })
  .change();

Here's an updated codepen

关于jquery - 如何切换 :hover effect?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52133795/

28 4 0
文章推荐： java - CsvMapReader 似乎无法解析我的文件
文章推荐： c++ - 单链表 C++
文章推荐： html - 无法让 float 匹配 100% 宽度或扩展父级
文章推荐： html - CSS 更改特定 href 的按钮颜色
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com