当其他div具有相同的类时，如何让jquery应用于一个div

The problem here is that when i hover the specific div, the jquery script applys on every div with the same class. I'd like the script works only on the hovered element even if other divs have the same class. I don't have css ID's in this to make it easier. Here is my jQuery code :

这里的问题是当我悬停特定的div时,jquery脚本应用于具有相同类的每个div。我希望该脚本仅适用于悬停元素,即使其他div具有相同的类。我没有这方面的CSS ID,以使其更容易。这是我的jQuery代码:

jQuery(".enprod_grille .isotope-container").hover(function() {
    // do this on hover
    jQuery('.enprod_grille .post-thumb').animate({
      'marginRight': '0px',
      'opacity': '0.4'
    }, 'fast');
    jQuery('.enprod_grille .post-title').animate({
       'paddingLeft': '0px',
       'opacity': '1'
    }, 'fast');
    jQuery('.enprod_grille .entry-content').animate({
       'paddingLeft': '0px',
       'opacity': '1'
    }, 'fast');
},function() {
    // do this on hover out
    jQuery('.enprod_grille .post-thumb').animate({
       'marginRight': '45px',
       'opacity': '1'
    }, 'fast');
    jQuery('.enprod_grille .post-title').animate({
       'paddingLeft': '20px',
       'opacity': '0'
    }, 'fast');
    jQuery('.enprod_grille .entry-content').animate({
       'paddingLeft': '20px',
       'opacity': '0'
    }, 'fast');
});

Here is the link of the website, it appears in "En production" column on the bottom right : http://mwww.fr/fullhouse/?lang=fr

这是该网站的链接,它出现在右下角的“En production”栏目中:http://mwww.fr/fullhouse/?lang = fr

4 个解决方案

#1

Target the current div using this like:

使用以下方法定位当前div:

jQuery(".enprod_grille .isotope-container").hover(function() {
    // do this on hover
    jQuery(this).find('.post-thumb').animate({
        'marginRight': '0px',
        'opacity': '0.4'
    }, 'fast');
    jQuery(this).find('.post-title').animate({
        'paddingLeft': '0px',
        'opacity': '1'
    }, 'fast');
    jQuery(this).find('.entry-content').animate({
        'paddingLeft': '0px',
        'opacity': '1'
    }, 'fast');
}, function() {
    // do this on hover out
    jQuery(this).find('.post-thumb').animate({
        'marginRight': '45px',
        'opacity': '1'
    }, 'fast');
    jQuery(this).find('.post-title').animate({
        'paddingLeft': '20px',
        'opacity': '0'
    }, 'fast');
    jQuery(this).find('.entry-content').animate({
        'paddingLeft': '20px',
        'opacity': '0'
    }, 'fast');
});

#2

Change your code to

将您的代码更改为

jQuery(".enprod_grille .isotope-container").hover(
function() {

       var cont=jQuery(this).closest('.enprod_grille');
       // do this on hover
       cont.find('.post-thumb').animate({
        'marginRight': '0px',
        'opacity': '0.4'
        }, 'fast');

       cont.find('.post-title').animate({
        'paddingLeft': '0px',
        'opacity': '1'
        }, 'fast');

       cont.find('.entry-content').animate({
        'paddingLeft': '0px',
        'opacity': '1'
        }, 'fast');
     }
, 
function() {

       var cont=jQuery(this).closest('.enprod_grille');
       // do this on hover out
       cont.find('.post-thumb').animate({
        'marginRight': '45px',
        'opacity': '1'
        }, 'fast');

       cont.find('.post-title').animate({
        'paddingLeft': '20px',
        'opacity': '0'
        }, 'fast');

       cont.find('.entry-content').animate({
        'paddingLeft': '20px',
        'opacity': '0'
        }, 'fast');
     }

#3

Try:

$('.divname')[0]
$('.divname').get(0)

or of course:

当然还是:

$('.divname:first-child')

#4

just try this example replace img background with image.

试试这个例子用图像替换img背景。

<!DOCTYPE html>
<html>
<head>
    <title>Que</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .parent{
            height: 100px;
            width: 100px;
            margin: 20px 20px 20px 20px;
        }
        .text{
            position: absolute;
            height: 100px;
            width: 100px;
            text-align: center;
            opacity : 0;
        }
        .img{
            position: absolute;
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="img"></div>
        <div class="text"><span>a</span></div>
    </div>
    <div class="parent">
        <div class="img"></div>
        <div class="text"><span>b</span></div>
    </div>
    <div class="parent">
        <div class="img"></div>
        <div class="text"><span>c</span></div>
    </div>
    <div class="parent">
        <div class="img"></div>
        <div class="text"><span>d</span></div>
    </div>
    <script>
    $('.text').on('mouseover', function(){
        $(this).animate({
            'margin-left' : -20,
            'opacity' : 1,
        },300);
        $(this).closest('.parent').find('.img').animate({
            'margin-left' : 40,
            'opacity' : 0.2,
        },300);
    });
    $('.text').on('mouseout', function(){
        $('.text').animate({
            'margin-left' : 0,
            'opacity' : 0
        },300);
        $('.img').animate({
            'margin-left' : 0,
            'opacity' : 1
        },300);
    });
    </script>
</body>
</html>

#1