媒体查询不'；jQuery之后无法工作

在调整窗口大小时，我使用媒体查询更改某些

div

s的宽度和高度。我还使用jQuery在鼠标上方使它们变大。但是，当执行jQuery时，媒体查询停止工作，在调整大小后，

div

s的宽度和高度与jQuery中设置的相同，并且媒体查询的样式不会应用于

div

s

对不起，我的英语不好

css

和jQuery

var s = $("#kruh1").width();
var d=s+10;

$("#kruh1").mouseover(function()
 {
   $("#kruh1").animate({width: d+"", height: d+""}, );
 });

$("#kruh1").mouseout(function()
 {
   $("#kruh1").animate({width: s+"", height: s+""}, );
 });

---

这里不需要jQuery。CSS非常适合这项工作

.kruh {
  transition: transform 0.4s ease;
}
@media only screen and (max-width:1100px) {
  .kruh {
    width: 150px;
    height: 150px;
  }
  .kruh:hover {
    transform: scale(1.07);
  }
}
@media only screen and (max-width:850px) {
  .kruh {
    width: 100px;
    height: 100px;
  }
  .kruh:hover {
    transform: scale(1.1);
  }
}

请注意，在CSS中，您的目标元素是类

.kruh

。在jQuery中，您的目标元素id为

#kruh1

---

只要您不显示HTML，就没有人能确定他们的帮助是否对您有效。

您使用类作为css选择器，id作为jquery对象。什么是html内容？它有相同名称的类和id，或者你错过了？再想想。div是圆形的，在改变比例1.07后，它们会很好地放大，但也会在50像素左右下滑，我不想这样做。你知道怎么修吗？

变换原点：中心非常感谢，transform Ogin不是解决方案，但我删除了transform:translateX（-50%）；转化：translateY（-50%）；现在它工作得很好
.kruh {
  transition: transform 0.4s ease;
}
@media only screen and (max-width:1100px) {
  .kruh {
    width: 150px;
    height: 150px;
  }
  .kruh:hover {
    transform: scale(1.07);
  }
}
@media only screen and (max-width:850px) {
  .kruh {
    width: 100px;
    height: 100px;
  }
  .kruh:hover {
    transform: scale(1.1);
  }
}