Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tentando fazer um efeito em uma imagem, para aparecer o título dela somente quando o mouse estiver em cima, e estou utilizando essa função abaixo, mas somente o" mouseoverr" funciona, quando o mouse sai do elemento, ele não esconde como mouseout deveria fazer. Mas meu console não acusa nenhum erro.
(function($){
$(document).ready(function(e){
$(".title-post").hide();
$(".entry-thumb").on("mouseover", function(){
$(".title-post").show();
});
$(".entry-thumb").on("mouseout", function(){
$("title-post").hide();
});
});
})(jQuery);Me deparei com outro problema, quando eu coloco o mouse em cima, ele me mostra o nome de todos os posts, e é pra aparecer somente do post que o mouse está em cima
<article id="post-106" class="post-106 post type-post status-publish format-image has-post-thumbnail hentry category-newborn post_format-post-format-image">
<div class="entry-thumb">
<a href="http://brunooliveirafotoedesign.esy.es/newborn/newborn-samuel/" title="Newborn Samuel"><img width="830" height="553" src="http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-830x553.jpg" class="attachment-sydney-large-thumb size-sydney-large-thumb wp-post-image" alt="" srcset="http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-830x553.jpg 830w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-300x200.jpg 300w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-768x512.jpg 768w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-230x153.jpg 230w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-350x233.jpg 350w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-480x320.jpg 480w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n.jpg 960w" sizes="(max-width: 830px) 100vw, 830px" /></a>
</div>
<header class="entry-header">
<h2 class="title-post entry-title"><a href="http://brunooliveirafotoedesign.esy.es/newborn/newborn-samuel/" rel="bookmark">Newborn Samuel</a></h2>
</header><!-- .entry-header -->
<div class="entry-post">
</div><!-- .entry-post -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link" href="http://brunooliveirafotoedesign.esy.es/wp-admin/post.php?post=106&action=edit">Edit</a></span> </footer><!-- .entry-footer -->
</article><!-- #post-## -->
o id do article é dado automaticamente pelo PHP do tema do WP(function($){
$(document).ready(function(e){
$(".title-post").hide();
$(".entry-thumb").on("mouseover", function(){
$(this).parents('.post').find('.title-post').show();
});
$(".entry-thumb").on("mouseout", function(){
$(this).parents('.post').find('.title-post').hide();
});
});
})(jQuery);
você leu o link que postei?
ps: não dê UPs nos teus posts.(function($){
$(document).ready(function(e){
$(".title-post").hide();
$(".entry-thumb").on("mouseover", function(){
$(this).parents('.post').find('.title-post').show();
$(this).addClass("hover");
});
$(".entry-thumb").on("mouseout", function(){
$(this).parents('.post').find('.title-post').hide();
$(this).removeClass("hover");
});
});
})(jQuery);
Com essas 2 linhas adicionadas, o jquery vai adicionar e remover a classe hover no elemento?ai ele vai colocar a classe hover no .entry-thumb.
você queria ela onde?
no .entry-thumb mesmo, pra dar um efeito de hover na imagem
nesse caso era mais fácil usar o css :hover
faltou o . (ponto)
$(".title-post").hide();