Question

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

当我将案例的内容悬停在相册的封面图像上时，它会起作用。

但是我希望选中一个勾号时该效果能够生效。我现在无法添加或切换悬停效果。我尝试添加一个类，但是效果变得很奇怪。

这是密码笔链接

**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();

Answer 1

实现此目标的最佳方法是添加一个具有与: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

Answer 2

更新

@VVV我想我已经解决了。

这是jquery代码。

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

            if(checkboxState == true){
                $(this).closest(".content").addClass("checked details");
            }

            if(checkboxState == false){
                $(this).closest(".content").removeClass("checked details");
            }
        }).change();

Answer 3

我认为这可能会更简单。

使用与接受的答案相同的代码笔：

$('input[type="checkbox"]').click(function() {
    $(this).closest(".content").toggleClass("checked");
});

如果应该发生其他事情：

$('input[type="checkbox"]').click(function() {
    $(this).closest(".content").toggleClass("checked");
    if ($(this).prop("checked")) {

    } else {

    }
});

如何切换：hover效果？

3 个答案: