Javascript 悬停功能未恢复到其原始状态

我试图通过图像显示一些类别，悬停时图像变大，其他图像变小，悬停的图片会变暗，并会出现一个按钮。这一切都有效。然而，它并没有回到最初的状态

^这就是我的密码

//Image Category size change effect
$('.cat-wrap div').hover(function() {
    $(this).css('width', '30%');
    $(this).children().css('opacity','1');
    $(this).siblings().css( "width", "16.5%");
});

---

我觉得这是一个鼠标出问题，但我认为悬停功能已经解决了这个问题

要使其恢复，需要添加mouseout事件的处理程序。这只是将第二个回调参数传递给

hover（）

方法

$('.cat-wrap div').hover(function() {

      $(this).css('width', '30%');
    $(this).children().css('opacity','1');
      $(this).siblings().css( "width", "16.5%");

  }, function(){
    // mouse out function
});

---

使用jQuery，您还需要提供其他转换：

//Image Category size change effect
$('.cat-wrap div').hover(function() {

  $(this).css('width', '30%');
  $(this).children().css('opacity', '1');
  $(this).siblings().css("width", "16.5%");

}, function() {
  $(this).css('width', '19.2%');
  $(this).children().css('opacity', '0');
  $(this).siblings().css("width", "19.2%");  
});

---

下面是您正在寻找的javascript示例：

var origWidth；
可变容量；
//图像类别大小更改效果
$（'.cat wrap div'）。悬停（函数（）{
origWidth=$（this.css（'width'）；
origOpacity=$（this.children（）.css（'opacity'）；
$（this.css（'width'，'30%'）；
$（this.children（）.css（'opacity'，'1'）；
$（this.this（）.css（“宽度”，“16.5%”）；
},
函数（）{
$（this.css（'width'，origWidth）；
$（this.children（）.css（'opacity'，origocapacity）；
});不要把你的代码放在代码笔里，用