Javascript 图像上的悬停效果

我正在尝试将悬停效果应用于我的WP主题中的图像。它是由帖子上的特色图片创建的网格图像

网格由content.php控制

<?php
/**
 * controls main grid images
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>

    <div class = "box-ovrly">
      <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
      <div class="box-meta"><?php the_category(', '); ?></div>
    </div>

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <a href="<?php the_permalink(); ?>"> <img class="img-responsive hover-decal" src="<?php echo $image ?>"/></a>
    <?php endif; ?> 

</article><!-- #post-## -->

它将标题和类别放在图像的顶部。我希望它有一个背景来覆盖悬停时的图像，但在悬停之前根本不显示

我想要做的最好的例子（最终不同的背景颜色，等等，但我不想在图像上有任何文字，直到悬停）就是在这个公文包上

---

必须做类似的事情，但希望这对你有用。当然，根据您的使用情况进行修改。这是一个过于简单的版本

弗尔。1（链接中的html、JS和CSS，JS发布在此处）：

弗尔。2:

---

您可以使用纯CSS实现这种效果

JSFiddle-

在下面的代码中，最重要的部分是

.element:hover>.element hover

位。这意味着“显示

.element悬停

，当

.element

悬停时，它是

.element

的子项”

只需查看本例中HTML的结构，并在WordPress代码中进行模拟。（当然，为您的元素提供适当的名称）

测试CSS:

.element {
    position: relative;
    display: inline-block;
    z-index: 0;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.strawberries {
    background: url('http://images4.fanpop.com/image/photos/16300000/Delicious-pretty-fruit-fruit-16382128-670-562.jpg');
}
.watermelon {
    background: url('http://fyi.uwex.edu/safepreserving/files/2013/08/watermelon.jpg');
}
.pineapple {
    background: url('http://static.giantbomb.com/uploads/original/7/71129/2672509-6564604021-pinea.jpg');
}
.element:hover > .elementHover {
    opacity: 1;
    z-index: 1;
}
.elementHover {
    position: absolute;
    opacity: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
}
.hoverContent {
    position: relative;
    z-index: 10;
    color: #fff;
    font-size: 200%;
    padding: 1em;
}
.hoverBackground {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.green {
    background: green;
}
.red {
    background: red;
}

<div class="element strawberries">
    <div class="elementHover">
        <img class="hoverBackground" src="http://www.aux.tv/wp-content/uploads/2012/09/how-to-rick-roll-somebody.jpg"/>
        <span class="hoverContent">
            Hello there
        </span>
    </div>
</div>
<div class="element watermelon">
    <div class="elementHover">
        <div class="hoverBackground green"></div>
        <span class="hoverContent">
            Goodbye now
        </span>
    </div>
</div>
<div class="element pineapple">
    <div class="elementHover">
        <div class="hoverBackground red"></div>
        <span class="hoverContent">
            ...Not yet
        </span>
    </div>
</div>

测试HTML:

.element {
    position: relative;
    display: inline-block;
    z-index: 0;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.strawberries {
    background: url('http://images4.fanpop.com/image/photos/16300000/Delicious-pretty-fruit-fruit-16382128-670-562.jpg');
}
.watermelon {
    background: url('http://fyi.uwex.edu/safepreserving/files/2013/08/watermelon.jpg');
}
.pineapple {
    background: url('http://static.giantbomb.com/uploads/original/7/71129/2672509-6564604021-pinea.jpg');
}
.element:hover > .elementHover {
    opacity: 1;
    z-index: 1;
}
.elementHover {
    position: absolute;
    opacity: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
}
.hoverContent {
    position: relative;
    z-index: 10;
    color: #fff;
    font-size: 200%;
    padding: 1em;
}
.hoverBackground {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.green {
    background: green;
}
.red {
    background: red;
}

<div class="element strawberries">
    <div class="elementHover">
        <img class="hoverBackground" src="http://www.aux.tv/wp-content/uploads/2012/09/how-to-rick-roll-somebody.jpg"/>
        <span class="hoverContent">
            Hello there
        </span>
    </div>
</div>
<div class="element watermelon">
    <div class="elementHover">
        <div class="hoverBackground green"></div>
        <span class="hoverContent">
            Goodbye now
        </span>
    </div>
</div>
<div class="element pineapple">
    <div class="elementHover">
        <div class="hoverBackground red"></div>
        <span class="hoverContent">
            ...Not yet
        </span>
    </div>
</div>

你好
再见
……还没有

---

请注意，您只需在悬停状态下使用一个素色的

DIV

而不是

IMG

，您所需要做的就是将

IMG

标记更改为

DIV

，并将背景设置为

。我可以直接将其添加到functions.php中，还是需要通过外部js将其引入。版本2看起来效果更好，只需将其添加到JS文件和样式文件中即可。根据你的喜好修改。我知道我给出的代码也有文本覆盖（当鼠标悬停在其他元素上的一个元素上时会有淡入淡出的效果），但只需从HTML/JS/CSS中删除这些细节即可。您可以通过函数或代码调用它，您可以调用希望它影响的任何样式的类或id。JS只是在您使用的图像之间进行平滑过渡，在这种情况下会逐渐消失。我似乎无法在我的文件中使用它，我创建了一个新的JS/hover-deal.JS，并使用了JSFIDDLE中的代码。您调用的是正确的jquery版本吗？此外，一个指向您工作的链接也会有所帮助。主题需要最新的查询。不幸的是，我的工作仍然在localhost上，所以我无法提供Onlinet，在示例中，它似乎工作得很好，而且相当简单。但正如我提到的，一旦我得到它接线，我想下一步改变悬停背景，不同的职位不同的颜色。我假设这涉及到js，那么这种技术能很好地与之集成吗？是的，当然，你只需要添加更多的类，并为每个不同的帖子指定你想要的风格。我将在稍后更新JSFIDLE。看看：这是您想要的吗？你几乎可以用任何你想要的方式来设计它们。只要继续添加类。当我把它应用到我的wordpress上时（我复制了你的css，并将“box Ovry”的标记更改为你提供的示例，前提是它打破了网格，“overlay”出现在图像之外。另一个问题是，这是一个帖子循环，所以帖子是用循环创建的，所以我无法独立地对每个帖子进行硬编码。嗯，如果不查看你的网格，很难判断它可能是什么已设置样式，但您可以尝试将
top:0；left:0
设置为
。hoverBackground
和
position:absolute
设置为
。hoverContent
。