html - 我如何设计我的图像 :hover within a link for a responsive website?

Question

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

这是我在 Chrome 上得到的闪烁的 Photoshop，在 Safari 上没有任何显示。

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

网站:

http://couill.art/project/about-duplicate-2 (美国国家科学基金会)

代码:

<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>不能采用背景属性。当您将鼠标悬停在图像上时，样式更改会将其调整为零宽度和高度，因为围绕它的 anchor 链接是一个内联元素而不是 block 。在那一刻，您不再将鼠标悬停在它上面，样式会弹回。

技术的组合得到了你想要的结果:

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

并将背景悬停样式向上移动到 anchor :

.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/