How to toggle :hover effect?
Question
I am trying to toggle a hover effect that I have made with scss in laravel 5.
When I hover over the content in my case a cover image of a album, it works the effect.
But I wanted the effect to be active when a checkmark is filled. I am now at a point that I can't add or toggle that hover effect. I tried adding a class but then the effect gets weird.
This is the codepenlink
**https://codepen.io/Edris89/pen/zJZEma**
This is the code that I used. I putting it in for future use for others.
This is the HTML code.
<!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>
This is the scss code.
.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;
}
And for last the jquery code.
$( "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();
3 answers
solution1
2 ACCPTED 2018-09-02 04:41:44
The best way to achieve this is to add a new class that has the same CSS as the :hover effect.
Something like this where I added a .checked class.
.content:hover .content-overlay,
.content.checked .content-overlay {
opacity: 0.6;
}
Then in your Javascript, you need to toggle the class.
$("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();
solution2
2 2018-09-02 06:19:45
UPDATE
@VVV I think I fixed it.
This is the jquery code.
$( "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();
solution3
1 2018-09-02 06:43:29
I think it could be a bit simpler.
Working on the same codepen as the accepted answer:
$('input[type="checkbox"]').click(function() {
$(this).closest(".content").toggleClass("checked");
});
If something else is supposed to happen:
$('input[type="checkbox"]').click(function() {
$(this).closest(".content").toggleClass("checked");
if ($(this).prop("checked")) {
} else {
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.