возможно вопрос совсем глупый, выдающий во мне полнейшего новичка, коим я и являюсь,но все же:
имеется <div id="news">, содержащий в себе несколько дочерних <div>-ов
<div id="news">
<div id="news-1" class="newsImage" >
<h3>News</h3>
<p>Text</a></p>
</div>
<div id="news-2" class="newsImage">
<h3>News</h3>
<p>text</p>
<p><a href="#">Learn more...</a></p>
</div>
<div id="news-3" class="newsImage">
<h3>News</h3>
<p>text</p>
<p><a href="#">Learn more...</a></p>
</div>
<div id="news-4" class="newsImage">
<h3>News</h3>
<p>text</p>
<p><a href="#">Learn more...</a></p>
</div>
<div id="news-5" class="newsImage">
<h3>News</h3>
<p>text</p>
<p><a href="#">Learn more...</a></p>
</div>
</div>
Задача в том, чтобы в случае event-а .hover происходило изменение ширины <div> класса ".newsImage" и появление ранее невидимых (visibility:hidden) параграфов <p>
именно в том блоке <div> на который наведен указатель мыши
$('.newsImage').hover(
function(){
$('.newsImage').width('16%');
$(this).width('30%');
$('.newsImage p').css('visibility','visible');
},
function(){
$('.newsImage').width('20%');
$('.newsImage p').css('visibility','hidden');
}
);
Но, как вы догадываетесь при наведении мыши на блок становятся видны параграфы <p>
во всех блоках класса class="newsImage", а не только в том на которой навели мышь.
Вопрос: можно ли как нибудь изолировать нужные параграфы используя "this" и обращаться только к тому, который находится в активном блоке <div>??