Question

我想在此网站http://sputniknews.com/上使用javascript效果。特别是，当您在（div）新闻上移动鼠标，并且新闻文本在图像背景上淡入时，图像背景淡出。它在技术上如何被称为？（所以我可以通过谷歌搜索）感谢

Answer 1

正如我在评论中所说，我认为你不需要任何类型的JavaScript。你只需要一些css，使用伪类：悬停和一点隐藏和显示。野外有很多例子，这里有一个：http://tympanus.net/Tutorials/OriginalHoverEffects/

基本上你有一个html容器（例如一个A-Tag），包含一个图像，一个短版本和一个长版本的新闻，在：悬停切换它们的显示，通过现代浏览器的一些转换来增强它如果没有一行JavaScript代码，你甚至会得到一些更奇特的东西。

<a class="teaser" href="#">
    <img src="http://lorempixel.com/320/320/sports/" />
    <span class="image-info">
        <!-- this is visible per default -->
        <span class="abstract">
            <strong>Title</strong>
            <em>Short description</em>
        </span>
        <!-- this is visible on hover -->
        <span class="description">
            <strong>Long Title</strong>
            <em>Long description.</em>
        </span>
    </span>
</a>

容器具有相对位置，因此信息可以绝对放置 - 默认情况下底部，信息本身具有半透明背景（最好是rgba - 作为旧版浏览器的后备，您可以使用png图像文件）。

.teaser {
    display: block;
    position: relative;
    overflow: hidden;
}

.teaser .image-info {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0; 
    width: 100%;
    /* transparent background color, 
       easy fallback could be a transparent 
       png image as background */
    background: rgba(0,0,0,.5);
}

img {
    /* to avoid spaces */
   float: left;
}

/* initial display inside the container */
.teaser span {
    display: block;
}

.teaser: .description {
    display: none;
}

/* on mouseover switch display */
.teaser:hover .abstract {
    display: none;
}

.teaser:hover .description {
    display: block;
}

/* cover the complete image */
.teaser:hover .image-info  {
    height: 100%;
}

我整理了一个小fiddle来证明这个原则。不像上面提到的例子那样花哨，只是为了解释这个想法。

怎么叫这个jquery效果？

1 个答案: