JQuery отображает все элементы, нуждается в помощи с родительской ссылкой или $ this

Question

У меня есть список изображений и контента, которые они обернуты в теги div, которые называются views-row-1, views-row-2, views-row-3 и т. Д.

• div1 .views-field-field-inthepress-icon-fid .field-content

• div2 .views-field-markup .field-content

после того, как div1 наведен, я делаю div2 видимым, используя jquery (для css значение не установлено), используя css div2 идет поверх div1, а затем я спрятал div1

Я скрыл содержимое, и с помощью JQuery я отображаюпроблема в том, что при наведении курсора все содержимое отображается для всех списков!

<script type="text/javascript">
$(document).ready(function() {
    $(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
        $(".views-field-markup .field-content").css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });

    $(".views-field-markup .field-content").hover( function() {
        $(".views-field-markup .field-content").css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });
});
</script>



<div class="views-row views-row-1 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>

<div class="views-row views-row-2 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>

<div class="views-row views-row-3 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>

Answer 1

<script type="text/javascript">
$(document).ready(function() {
    $(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
        $(this).css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });

    $(".views-field-markup .field-content").hover( function() {
        $(this).css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });
});
</script>

Просто измените цель на $ (это).когда вы используете $ (". views-field-markup .field-content"), он выбирает все элементы с этими классами.Хорошо использовать $ (". Views-field-markup .field-content"), чтобы скрыть элементы.потому что вы не хотите показывать какой-либо элемент с этими классами, когда мышь отсутствует.

Answer 2

$(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
    $(this).parent().next().css('display','block');
}, function() {
    $(this).parent().next().hide();
});

Получает родительский элемент элемента поиска, а затем находит следующего брата.Если ваш HTML всегда будет соответствовать структуре в вашем вопросе, это должно работать нормально.

Обратите внимание, что вы можете использовать .show() вместо установки свойства CSS display.