在CSS中选择某些博客文章(汤博乐主题)

Question

我在{block:Posts}中有一个很大的<article>标签，这意味着我对article进行了风格化处理，使我博客主题上的帖子具有风格。我在使用jQuery时遇到的一个问题是，当在<article>标签上使用mouseenter或mouseleave时，它会选择页面上的所有帖子（因为它们都是文章），并执行我编码的内容，但针对所有帖子，而不是我想要的特定帖子。

这是我的代码：

 $(document).ready(function(){
     $("article img").mouseenter(function(){
         $("article").css("background-color", "red");
     });
     $("article img").mouseleave(function(){
         $("article").css("background-color", "transparent");
     });
 });

我不知道怎么做的是针对我悬停的特定帖子，而不是整堆帖子。

谢谢，请原谅我的新手jQuery编码。

Answer 1

要引用特定的article，可以将event（通常简称为e）传递给mouseenter回调，如下所示：

$('article img').mouseenter(function(e) {
    $(e.target).closest('article').css('background-color', 'red');
});

请参阅http://codepen.io/anon/pen/gbJGOY

Answer 2

$("article img").hover( 
  function(e){
    $(e.target).css("background-color", "red");
   },
   function(e){
     $(e.target).css("background-color", "transparent");
});

DEMO

Answer 3

您需要更改代码，以针对您希望更改为红色的特定元素。目前您正在说，当鼠标进入文章img时，您希望所有文章的背景色都是红色。您可以将其更改为使用this，它将针对您选择的文章img。

 $(document).ready(function(){
     $("article img").mouseenter(function(){
         $("this").css("background-color", "red");
     });
     $("article img").mouseleave(function(){
         $("this").css("background-color", "transparent");
     });
 });

文章图片是否有与之相关联的类或id？如果你能提供一些html代码，那会很有帮助。