Javascript 单击时添加悬停效果，再次单击时删除

我已经做了一个产品块，可以选择在悬停时看到一个很好的效果，但我想看到我在悬停时看到的悬停效果，可以在点击div时看到，但我不知道如何才能做到这一点

我唯一想做的就是将它完全放在css/sass或Javascript中，如果不能用Javascript或css/sass完成，那么jQuery就可以了

正文{
宽度：100%；
身高：100%；
背景色：#c8cfdc；
颜色：#363636；
字体系列：“Roboto”，无衬线；
}
.积木箱{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit盒包：证明；
-ms-flex-pack:justify；
证明内容：之间的空间；
填充：20px0；
宽度：90%；
保证金：0自动；
最大宽度：1170px；
}
.街区{
背景色：#fff；
光标：指针；
边缘底部：20px；
}
.产品块{
宽度：31%；
溢出：隐藏；
位置：相对位置；
高度：340px；
-webkit过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
}
.product\U块.product\U头{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：55px；
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
-webkit变换：-webkit变换0.43s立方贝塞尔（0.32,1.259,0.375,1.15）；
过渡：-webkit变换0.43s三次贝塞尔（0.32,1.259,0.375,1.15）；
变换：变换0.43s三次贝塞尔（0.32,1.259,0.375,1.15）；
变换：变换0.43s立方贝塞尔（0.32,1.259,0.375,1.15），-webkit变换0.43s立方贝塞尔（0.32,1.259,0.375,1.15）；
}
.product\U block.product\U header.product\U HEARD{
浮动：左；
边缘顶部：15px；
左侧填充：30px；
}
.product\U block.product\U header.product\U heart img{
宽度：20px；
高度：20px；
}
.product\U块。product\U头。product\U标签{
位置：绝对位置；
顶部：15px；
左：50%；
文本对齐：居中；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
颜色：#fff；
文本转换：大写；
字体系列：“Ropa Sans”，无衬线；
背景色：#3b4068；
填充：4px15px；
边界半径：0.8em；
-webkit过渡：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.product\U block.product\U header.product\U shop{
浮动：对；
边缘顶部：15px；
右侧填充：30px；
}
.product\U block.product\U header.product\U shop img{
宽度：20px；
高度：20px；
}
.product\U block.product\U img{
保证金：0自动；
宽度：95%；
高度：260px；
背景尺寸：包含；
背景位置：50%80%；
背景重复：无重复；
-webkit转换：规模（1）；
变换：比例（1）；
-webkit转换：-webkit转换0.3s轻松输入输出；
转换：-webkit转换0.3s轻松输入输出；
转换：转换0.3s轻松输入输出；
转换：转换0.3s轻松输入输出，-webkit转换0.3s轻松输入输出；
过渡：所有900ms缓解；
}
.产品块.产品信息{
转换：转换（0px，200px）；
文本对齐：居中；
填充顶部：20px；
}
.产品块.产品信息.产品标题{
字体大小：16px；
字体系列：“Ropa Sans”，无衬线；
文本转换：大写；
边缘底部：5px；
}
.产品块.产品信息.产品字幕{
字体大小：12px；
字体大小：300；
字母间距：1px；
颜色：#999；
保证金：0；
边缘底部：15px；
}
.产品块.产品信息.产品价格{
字体系列：“Ropa Sans”，无衬线；
字体大小：15px；
文本转换：大写；
字号：700；
}
.产品块.产品信息.产品价格范围{
文字装饰：线条贯通；
颜色：#fc7070；
左侧填充：9px；
}
.产品块：悬停{
过渡：所有300毫秒缓解；
背景色：#3b4068；
颜色：#fff；
}
.product\u块：悬停.product\u标题{
-webkit转换：translateY（0）；
变换：translateY（0）；
}
.product\u块：悬停.product\u标题.product\u标记{
背景色：#fff；
颜色：#3b4068；
}
.product\u块：悬停.product\u img{
过渡：所有300毫秒的缓进缓出；
-webkit转换：比例（1.03）；
转换：比例（1.03）；
背景位置：30%30%；
宽度：40%；
-ms变换：旋转（20度）；
/*IE 9*/
-webkit变换：旋转（20度）；
/*狩猎*/
变换：旋转（20度）；
}
.product\u块：悬停.product\u信息{
过渡：所有300毫秒缓解；
转换：转换（0px，-150px）；
文本对齐：居中；
填充顶部：20px；
}

耐克
Air Max Tavas SD
$160.00$200.00

您只需要一个活动状态。product\u 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');
})

JS

.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');
})

---

另外，您只需要一个活动状态。产品块元素

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');
})

JS

.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');
})

附：切换逻辑

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

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

切换逻辑

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

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

---

您需要查询所有项目，然后对它们进行迭代

就像这样：

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');
       }    
    })
}

var elems=document.querySelectorAll（'.product_block'）；
对于（变量i=0；i

您需要查询所有项目，然后对它们进行迭代

就像这样：

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');
       }    
    })
}

var elems=document.querySelectorAll（'.product_block'）；
对于（变量i=0；i

也许这个答案会有帮助？也许这个答案会有帮助？我看到它正在添加活动类，但我还需要将其作为一个切换，因此如果我再次单击它，它将删除悬停效果。我如何实现这一点？我看到它正在添加活动类，但我还需要将其作为一个切换