Question

我有一个主div，我有三个不同的div，每个子div包含图像和文本。我希望每当我将鼠标悬停在该子div上时，将该特定子div的图像缩放到缩放（1.1）。现在，当我将鼠标悬停在任何子div上时，所有子div的三个图像都会被缩放。

我的代码的HTML是

<html>
<div class="main">

<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>

<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>

<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>

</div>

和jquery是

$(".sub-div").each(function(){
   $(this).hover(function(){
   $('.img').css('transform','scale(1.1)');
   },function(){
   $('.img').css('transform','scale(1.0)');
   });
});

Answer 1

如果您绝对必须使用Javascript，请使用选择器return View("Validateresult", model);：

this

但你可以用CSS做同样的事情：

$(".sub-div").hover(function(){
   $('.img',this).css('transform','scale(1.1)');
   },function(){
   $('.img',this).css('transform','scale(1.0)');
});

在这里工作JSFiddle：https://jsfiddle.net/26zdf038/

Answer 2

为什么jquery？ .c使用css :hover

.sub-div img{
transition:all 0.2s ease-in;
transform:scale(1.0);
width:100px;
height:100px;
}
.sub-div:hover img{
transform:scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">

  <div class="sub-div">
    <img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
    <p>abc</p>
  </div>

  <div class="sub-div">
    <img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
    <p>xyz</p>
  </div>

  <div class="sub-div">
    <img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
    <p>abz</p>
  </div>

</div>

Answer 3

试试这会对你有帮助，

div:hover .picture{
  transform: scale(1.1);
}

<div>
    <img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
  </div>

  <div >
    <img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
  </div>
  
  <div>
    <img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">   
  </div>

Answer 4

您无需循环each。只需为.sub-div
使用$(this)来引用与您互动的当前对象以及其中的find img。

$(".sub-div").hover(function(){
  $(this).find('.img').css('transform','scale(1.1)');
},function(){
  $(this).find('.img').css('transform','scale(1.0)');
});

.sub-div { 
  float: left;
  width: 33%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
  <div class="sub-div">
    <img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
    <p>abc</p>
  </div>

  <div class="sub-div">
    <img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
    <p>xyz</p>
  </div>

  <div class="sub-div">
    <img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
    <p>abz</p>
  </div>

</div>

Answer 5

问题是你的图像选择器会选择所有图像，而你只需选择一个图像：

$(".sub-div").each(function() {
    $(this).hover(function() {
        $(this).find('.img').css('transform', 'scale(1.1)');
    }, function() {
        $(this).find('.img').css('transform', 'scale(1.0)');
    });
});

但是在这种情况下，我建议您使用CSS，因为性能：

.sub-div img { transition: 0.3s ease }
.sub-div:hover img { transfrom: scale(1.1) }

使用java脚本

5 个答案: