如何设置图像样式：将鼠标悬停在响应式网站的链接中？

Question

我正在努力让我的:hover状态适合原始的页脚图像链接。

这是我在Chrome上获得的闪烁的照片，在Safari上没有显示任何内容。

很抱歉链接到实际网站，但我无法在jsfiddle中重新创建问题。

网站：

http://couill.art/project/about-duplicate-2（NSFW）

代码：

<div class="row pp-thumbs">

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/about-duplicate" title="About"><img src="http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/about-duplicate" title="About">About</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/about-duplicate-2" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi-0-00-25-18.png" width="170" height="128"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/about-duplicate-2" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/danger-zone-duplicate" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/danger-zone-duplicate-2" title="Danger II"><img src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate-2" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/danger-zone" title="About"><img src="http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone" title="About">About</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/about" title="About"><img src="http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/about" title="About">About</a><span data-font="font_dqju2lgtu">About</span></p>
                    </div>

.project-panel .pp-thumb img {
    display: inline-block;
    width: 100%;
    height: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.project-panel .pp-thumb img:hover {
    display: block;
    width: 100%;    
    height: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 170px;
}
.project-panel .pp-thumb a[title="Danger Zone"]:hover>img {
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
    background-size: contain;
}

.project-panel .pp-thumb a[title="Danger II"]:hover>img {
  background: url(http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif) no-repeat;
  background-size: contain;
}
.project-panel .pp-thumb a[title="About"]:hover>img {
  background: url(http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif) no-repeat;
  background-size: contain;
}
.pp-thumbs {
    margin-top: 1.666666666666667rem;
}
.project-panel .pp-thumb {
    margin: auto !important;
}

谢谢您的帮助。

Answer 1

<img>不能采用背景属性。将鼠标悬停在图像上时，样式更改会将其大小调整为零宽度和高度，因为围绕它的锚链接是内联元素而不是块。那一刻，你不再在它上面徘徊，风格重新回归。

技术组合得到了您想要的结果：

.project-panel .pp-thumb a {
    display: inline-block;
}
.project-panel .pp-thumb a:hover > img {
    visibility: hidden;
}

并将背景悬停样式移动到锚点：

.project-panel .pp-thumb a[title="Danger Zone"]:hover {
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
    background-size: contain;
}
/* etc */

https://jsfiddle.net/cp37nwx0/

Answer 2

你也可以使用一个简单的内联JS：

<a href="/project/danger-zone"><img title="About" src="/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" onmouseover="this.src='/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif'" onmouseout="this.src='/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png'" /></a>

并注意我使用相对链接而不是绝对链接。这可能是一种更好的方法。