Question

我在使用我的CSS配置我的javascript时遇到了一些问题，因此当点击图像时，会出现一个带有图标的小标题栏。目前，当我将鼠标悬停在图像上时，标题栏会出现，但我想更改此设置，以便它可以用于平板电脑上的用户，他们必须触摸并且没有悬停功能。

查看页面

<figure>
    <img width="158" height="158" alt="Gravatar" 
             data-bind="attr:{src: GravatarUrl}" />
    <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" 
                   data-bind="attr:{'href':'mailto:' + Email()}"></a>
        <a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
    </figcaption>
</figure>

CSS

figure, figcaption {
    display: block;
}

 figure {
    position:relative;
    float:left;
    margin:20px;
    width:158px;
    height:158px;
    border:1px solid #333;
    overflow:hidden;
    background: #fff;
    padding: 1px;
}

 figure figcaption {
    position:absolute;
    bottom:0;
    left:0;
    opacity: .75;
    margin-bottom:-115px;       
    -webkit-transition: margin-bottom;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: margin-bottom;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: margin-bottom;
    -o-transition-duration: 400ms;
}

 figure.open figcaption {
    margin-bottom:0px;
}

 figcaption {
    width:160px;
    height:25px;
    background:#111;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
}

Javascript 不确定是否有办法只使用css。

<script type="text/javascript">
    (function ($) {
        $.views.Roster.GetRoster('@url');
        $('figure').on('click', function (event) {
            $(event.currentTarget).toggleClass('open'); 
        });
    })(jQuery);
</script>

Answer 1

切换一个类并将可见元素留给CSS是一个好主意。

$('figure').on('click', function (e) {
    $(this).toggleClass('open'); 
});

在这种情况下，按照您希望的方式设计您的figcaption然后添加：

figcaption { display: none; }
.open figcaption { display: block; }

这样，默认情况下隐藏figcaption但是当你单击目标并且javascript将类“open”添加时，figcaption将是可见的。你当然不必拥有显示块，除了“无”之外，它可能是大多数。

Answer 2

如果此代码

figure:hover figcaption {
    margin-bottom: 0px;
}

显示了figcaption，当你要显示时，你将open类放到figure，你可以使用：

figure:hover figcaption, figure.open figcaption {
    margin-bottom: 0px;
}

css和javascript在点击时显示图像的figcaption

2 个答案: