Question

在我正在处理的网站中，当您将鼠标悬停在其上时会有大量图像被放大。事实上，每个项目都有一个独特的类，用于识别在这个时间应该放大的项目。我想要做的是有一个简单的功能，可以单独应用于所有项目，所以我没有大约17个额外的类和一个庞大的JavaScript文件。在示例的情况下，当您将鼠标悬停在特定列上时，列中的图片将会放大。

Javscript代码：

$('.webDesignServices').hover(function() {
    $(".webDesignPicture").addClass('transition');
}, function() {
    $(".webDesignPicture").removeClass('transition');
});

$('.graphicDesignServices').hover(function() {
    $(".graphicDesignPicture").addClass('transition');
}, function() {
    $(".graphicDesignPicture").removeClass('transition');
});

CSS代码：

.webDesignPicture {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}

.graphicDesignPicture {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}
.transition {
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

HTML代码（已排除2个以使其更清晰）

        <div class = "container-fluid services">
            <div class = "row">
                <div class = "col-md-3 webDesignServices">
                    <img class = "img-responsive displayed servicePicture webDesignPicture" src = "img/globe.png" alt = "webdesign" style = "height: 100px">
                    <h2 class = "serviceTitles"> Web Design </h2>
                    <p class = "serviceDescription"> Cardiff's Premier Web Design. Full Web Solutions For Any Sized Business.</p>
                    <button class = "serviceButton displayed" id = "web-design" data-id="#web-design-slide"> Find Out More!</button>
                    <div id = "paddingSpace"></div>
                </div>
                <div class = "col-md-3 graphicDesignServices">
                    <img class = "img-responsive displayed servicePicture graphicDesignPicture" src = "img/pencil.png" alt = "graphicdesign" style = "height: 100px">
                    <h2 class = "serviceTitles"> Graphic Design </h2>
                    <p class = "serviceDescription"> Anything From Flyers And Business Cards All The Way To Product Design.</p>
                    <button class = "serviceButton displayed" id = "graphic-design" data-id="#graphic-design-slide"> Find Out More!</button>
                    <div id = "paddingSpace"></div>
                </div>                                    
            </div>
        </div>

Answer 1

为所有名为enlargeable的人添加一个类或类似的东西。

现在你可以做到：

$(".enlargeable").hover(function() {
  $(this).toggleClass("transition");
});

＆＃13;

$(".enlargeable").hover(function() {
  $(this).toggleClass("transition");
});

＆＃13;

.transition {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
.enlargeable {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid services">
  <div class="row">
    <div class="col-md-3 webDesignServices">
      <img class="img-responsive displayed servicePicture webDesignPicture enlargeable" src="img/globe.png" alt="webdesign" style="height: 100px">
      <h2 class="serviceTitles"> Web Design </h2>
      <p class="serviceDescription">Cardiff's Premier Web Design. Full Web Solutions For Any Sized Business.</p>
      <button class="serviceButton displayed" id="web-design" data-id="#web-design-slide">Find Out More!</button>
      <div id="paddingSpace"></div>
    </div>
    <div class="col-md-3 graphicDesignServices">
      <img class="img-responsive displayed servicePicture graphicDesignPicture enlargeable" src="img/pencil.png" alt="graphicdesign" style="height: 100px">
      <h2 class="serviceTitles"> Graphic Design </h2>
      <p class="serviceDescription">Anything From Flyers And Business Cards All The Way To Product Design.</p>
      <button class="serviceButton displayed" id="graphic-design" data-id="#graphic-design-slide">Find Out More!</button>
      <div id="paddingSpace"></div>
    </div>
  </div>
</div>

＆＃13;

Javascript / Jquery高效扩大编码

1 个答案: