jquery - 媒体查询在 jQuery 之后不起作用

Question

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

抱歉我的英语不好。

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，就没有人能确定他们的帮助是否对您有用。