添加悬停效果点击并再次删除，如果再次点击

我做了一个产品块的选项来看悬停效果不错，但我希望看到悬停效果，我看到悬停在点击时看到的div，但我不知道我怎么能做到这一点。添加悬停效果点击并再次删除，如果再次点击

我唯一想做的就是将它完全放在css/sass或Javascript中，如果它不能用Javascript或css/sass来完成，那么jQuery就没问题。

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #c8cfdc; 
 
    color: #363636; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.blocks_container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
    padding: 20px 0; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    max-width: 1170px; 
 
} 
 

 
.block { 
 
    background-color: #fff; 
 
    cursor: pointer; 
 
    margin-bottom: 20px; 
 
} 
 

 
.product_block { 
 
    width: 31%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 340px; 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 
.product_block .product_header { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 55px; 
 
    -webkit-transform: translateY(-100%); 
 
    transform: translateY(-100%); 
 
    -webkit-transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); 
 
    transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); 
 
    transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); 
 
    transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15), -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); 
 
} 
 
.product_block .product_header .product_heart { 
 
    float: left; 
 
    margin-top: 15px; 
 
    padding-left: 30px; 
 
} 
 
.product_block .product_header .product_heart img { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.product_block .product_header .product_tag { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 50%; 
 
    text-align: center; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-family: 'Ropa Sans', sans-serif; 
 
    background-color: #3b4068; 
 
    padding: 4px 15px; 
 
    border-radius: 0.8em; 
 
    -webkit-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.product_block .product_header .product_shop { 
 
    float: right; 
 
    margin-top: 15px; 
 
    padding-right: 30px; 
 
} 
 
.product_block .product_header .product_shop img { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.product_block .product_img { 
 
    margin: 0 auto; 
 
    width: 95%; 
 
    height: 260px; 
 
    background-size: contain; 
 
    background-position: 50% 80%; 
 
    background-repeat: no-repeat; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
 
    transition: -webkit-transform 0.3s ease-in-out; 
 
    transition: transform 0.3s ease-in-out; 
 
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 
 
    transition: all 900ms ease; 
 
} 
 
.product_block .product_info { 
 
    transform: translate(0px, 200px); 
 
    text-align: center; 
 
    padding-top: 20px; 
 
} 
 
.product_block .product_info .product_title { 
 
    font-size: 16px; 
 
    font-family: 'Ropa Sans', sans-serif; 
 
    text-transform: uppercase; 
 
    margin-bottom: 5px; 
 
} 
 
.product_block .product_info .product_subtitle { 
 
    font-size: 12px; 
 
    font-weight: 300; 
 
    letter-spacing: 1px; 
 
    color: #999; 
 
    margin: 0; 
 
    margin-bottom: 15px; 
 
} 
 
.product_block .product_info .product_price { 
 
    font-family: 'Ropa Sans', sans-serif; 
 
    font-size: 15px; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
} 
 
.product_block .product_info .product_price span { 
 
    text-decoration: line-through; 
 
    color: #fc7070; 
 
    padding-left: 9px; 
 
} 
 
.product_block:hover { 
 
    transition: all 300ms ease; 
 
    background-color: #3b4068; 
 
    color: #fff; 
 
} 
 
.product_block:hover .product_header { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
} 
 
.product_block:hover .product_header .product_tag { 
 
    background-color: #fff; 
 
    color: #3b4068; 
 
} 
 
.product_block:hover .product_img { 
 
    transition: all 300ms ease-in-out; 
 
    -webkit-transform: scale(1.03); 
 
    transform: scale(1.03); 
 
    background-position: 30% 30%; 
 
    width: 40%; 
 
    -ms-transform: rotate(20deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(20deg); 
 
    /* Safari */ 
 
    transform: rotate(20deg); 
 
} 
 
.product_block:hover .product_info { 
 
    transition: all 300ms ease; 
 
    transform: translate(0px, -150px); 
 
    text-align: center; 
 
    padding-top: 20px; 
 
}

<div class="blocks_container"> 
 
    <div class="block product_block rem" id="red"> 
 
    <div class="product_header"> 
 
     <div class="product_heart"> <img src="http://calleriphotographer.it/loving.svg"/></div> 
 
<!--  <div class="product_tag">Waffle</div> --> 
 
     <div class="product_shop"><img src="http://calleriphotographer.it/cart.svg"/></div> 
 
    </div> 
 
    <div class="product_img" style="background-image: url('http://calleriphotographer.it/nike.png')"></div> 
 
    <div class="product_info"> 
 
     <h3 class="product_title">nike</h3> 
 
     <h5 class="product_subtitle">Air Max Tavas SD</h5> 
 
     <p class="product_price">$160.00<span>$200.00</span></p> 
 
    </div> 
 
    </div> 
 
</div>

如果你想在与上海社会科学院点击codepen进行编辑下面

my codepen link

来源

2017-04-14 amir hanif

也许这个答案可以帮助？ http://stackoverflow.com/questions/17633152/javascript-onclick-event-handling-with-pure-javascript – boroboris

你只需要一个活跃的状态，你.product_block元素

CSS

.product_block.active:hover { 
    transition: all 300ms ease; 
    background-color: #3b4068; 
    color: #fff; 
} 
.product_block.active:hover .product_header { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
} 
.product_block.active:hover .product_header .product_tag { 
    background-color: #fff; 
    color: #3b4068; 
} 
.product_block.active:hover .product_img { 
    transition: all 300ms ease-in-out; 
    -webkit-transform: scale(1.03); 
    transform: scale(1.03); 
    background-position: 30% 30%; 
    width: 40%; 
    -ms-transform: rotate(20deg); 
    /* IE 9 */ 
    -webkit-transform: rotate(20deg); 
    /* Safari */ 
    transform: rotate(20deg); 
} 
.product_block.active:hover .product_info { 
    transition: all 300ms ease; 
    transform: translate(0px, -150px); 
    text-align: center; 
    padding-top: 20px; 
}

var elem = document.querySelector('.product_block'); 

elem.addEventListener("click", function(){ 
     this.classList.add('active'); 
})

附： JSFiddle

来源

2017-04-14 07:50:24 Leguest

我看到它正在添加活动类，但我也需要它是一个切换，所以如果我再次点击它消除了悬停效果我怎么能实现呢？ –

切换逻辑

var elem = document.querySelector('.product_block'); 

elem.addEventListener("click", function(){ 
    if(this.classList.contains('active')) { 
     this.classList.remove('active'); 
    } else { 
     this.classList.add('active'); 
    }  
})

来源

2017-04-14 08:11:10 Leguest

谢谢verrrrry much –

我有一个问题，如果我想添加更多的块并点击它们，效果根本不起作用，它只是为一个块工作？为什么这个 –

您需要查询所有内容，然后在它们之间迭代

就像是：

var elems = document.querySelectorAll('.product_block'); 

for(var i = 0; i < elems.length; i = i +1) { 
    elems[i].addEventListener("click", function(){ 
     if(this.classList.contains('active')) { 
      this.classList.remove('active'); 
     } else { 
     this.classList.add('active'); 
     }  
    }) 
}

来源

2017-04-14 08:54:06 Leguest

againnn你的帮助真的很感激它的工作:) –

添加悬停效果点击并再次删除，如果再次点击

回答

相关问题