添加懸停效果點擊並再次刪除，如果再次點擊

我做了一個產品塊的選項來看懸停效果不錯，但我希望看到懸停效果，我看到懸停在點擊時看到的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你的幫助真的很感激它的工作:) –

添加懸停效果點擊並再次刪除，如果再次點擊

回答

相關問題