jQuery 之后媒体查询不起作用

Question

当调整窗口大小时，我使用媒体查询来更改某些divs 的宽度和高度。我还使用 jQuery 使它们在鼠标悬停时变大。但是当执行 jQuery 时，媒体查询停止工作，并且在调整 divs 的大小后，其宽度和高度与 jQuery 中设置的相同，并且来自媒体查询的样式不适用于 divs。

对不起，我的英语不好。

css

@media only screen and (max-width:1100px)
{
 .kruh
 {
    width: 150px;
    height: 150px;
 }
}
@media only screen and (max-width:850px)
{
 .kruh
 {
    width: 100px;
    height: 100px;
 }
}

和 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+""}, );
 });

Answer 1

这里不需要 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 中，您使用 class .kruh 定位元素。在您的 jQuery 中，您使用 id #kruh1.

定位元素

只要您不同时显示 HTML，没有人可以确定他们的帮助是否对您有用。