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中，您使用类 .kruh定位元素。在您的jQuery中，您使用 id #kruh1定位元素。

只要您不显示HTML，任何人都无法确定他们的帮助是否适合您。

jQuery之后媒体查询不起作用

1 个答案: