Question

在这个小提琴http://jsfiddle.net/sLdhsbou/中，无论图像的大小如何，我都希望在悬停时绝对居中显示“x”。

另外，当鼠标移动到鼠标移动时鼠标移出图形时，为什么没有转换？

<table border=1 style="width: 100%;">
    <TR><TD COLSPAN=6 STYLE="border-bottom: medium solid gray;">&nbsp;</TD></TR>
    <tr>
        <td class="left" style="width: 25%; background-color: cyan;">
            <table border=2 style="width: 100%;">
                <tr>
                    <td style="border: thin solid #ff9900;">
                        <div class="img-wrap">
                            <figure class="cap-bottom">
                                <img src="http://placehold.it/300x200" />
                                <figcaption>
                                   <div class="icon icon-image"></div>
                                </figcaption>
                            </figure>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td colspan=2 style="padding-top: 12px; padding-right: 12px;">
            <center><span style="font-size: 16px; font-weight: bold;">lorem ipsum</span></center>
            <br/>lorem ipsum dolor sit amet, prima brute at cum, ius tota fugit error te, eum an quod invidunt. an facer fierent iudicabit vix, pri at illud diceret probatus. maiorum ponderum omittantur te per, pri alterum propriae postulant at. ut pro nostro petentium salutandi.
            <p/>est dico stet quaeque no, ei eos dolores dignissim. mei dicunt indoctum deterruisset an, recteque moderatius eu nam. per praesent efficiantur ut, ad mel assum laoreet tincidunt. ad qui agam nullam causae, ut mei minim clita, ut movet verterem democritum est.
        </td>
    </tr>
    <TR><TD COLSPAN=6 STYLE="border-top: thin solid gray;">&nbsp;</TD></TR>
</table>

figure img{display:block}

figure
{
    display: block;
    position: relative;
    float: left;
    overflow: hidden;
    margin:0; padding:0
}
figcaption
{
    display: block;
    position: absolute;
    background: rgba(255,204,51,0.75);
    color: white;
    opacity: 0;

    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease
}
figure:hover figcaption
{
    opacity: 1;
    width: 100%;
    height: 100%;
}

.cap-left figcaption{bottom:0;left:-100%}
.cap-left:hover figcaption{left:0}
.cap-right figcaption{bottom:0;right:-100%}
.cap-right:hover figcaption{right:0}
.cap-top figcaption{left:0;top:-100%}
.cap-top:hover figcaption{top:0}
.cap-bottom figcaption{left:0;bottom:-100%}
.cap-bottom:hover figcaption{bottom:0}

.icon { line-height: 1; }
.icon:link, .icon:visited, .icon:focus { color: #000; }
.icon-image
{
    position: absolute;
    top: 42%;
    left: 47%;
    font-size: 24px;
}
.icon-image:before{content: "x"}

Answer 1

.cap-bottom:hover figcaption {
  top: 0;
}

.cap-bottom figcaption {
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
}

如上所述更改你的css：）

希望这可以帮助你

悬停中心文字的图标题

1 个答案: