Question

我正在尝试将图像显示在文本后面作为悬停效果。

现在只是一个简单的启动页面，但我似乎无法弄清楚如何让它工作。

这是当前页面。徽标下方的字样是链接。 https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e

当用户悬停时，这是我想要的文字背后的图像。 https://gyazo.com/67852dd57789458942952b1dd3b3cb55

它就像是不同颜色的涂鸦效果。他们不会全部出现在一个，但只是在你盘旋时每个单词背后的不同。

这是html：

<tr role="row" class="odd">
<input type="hidden" name="EditedEntries.index" autocomplete="off" value="a2a18da0-528f-4b10-92c1-4a8ba7038dde">
    <td class="sorting_1">1</td>
    <td>1</td>
    <td>
        <input data-val="true" data-val-number="The field AdjHrs must be a number." data-val-required="The AdjHrs field is required." 
        id="EditedEntries_a2a18da0-528f-4b10-92c1-4a8ba7038dde__entry_AdjHrs" name="EditedEntries[a2a18da0-528f-4b10-92c1-4a8ba7038dde].entry.AdjHrs" type="text" value="0">
    </td>

这是CSS：

<tr role="row" class="odd">
<input type="hidden" name="EditedEntries.index" autocomplete="off" value="a2a18da0-528f-4b10-92c1-4a8ba7038dde">
    <td class="sorting_1">1</td>
    <td>1</td>
    <td>
        <input data-val="true" data-val-number="The field AdjHrs must be a number." data-val-required="The AdjHrs field is required." 
        id="EditedEntries_a2a18da0-528f-4b10-92c1-4a8ba7038dde_AdjHrs" name="EditedEntries[a2a18da0-528f-4b10-92c1-4a8ba7038dde].AdjHrs" type="text" value="0">
    </td>

非常感谢任何帮助！

Answer 1

完成此任务的最简单方法是使用背景图片你可以尝试这样的事情：

.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}

只需替换适合您链接的类名称，并且显然可以使用大小调整，类似于链接显示内联块就足够了。 Here您拥有此任务所需的一切

Answer 2

您只需在悬停时添加背景图片即可。这是一个小提琴：https://jsfiddle.net/rd7zbytc/

这是代码：

#links p a:hover {
    background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size:100px;
}

Answer 3

这是你在说什么？

http://codepen.io/xkurohatox/pen/qbPXOb

HTML更改：

 <div id="links">
 <p>
    <a id="a1" href="#">Liquidation</a> -
    <a id="a2" href="#">Monetization<a> -
    <a id="a3" href="#">Brokerage</a>
    </p>

 </div>

CSS更改：

#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
 background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
 background-size:100%;
}
 #a3:hover {
  background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
 background-size:100%;
}
/* images above are not my own and only being used for demo purposes */

希望这有帮助！

悬停CSS HTML上文本背后的图像

3 个答案: