2

我在使用我的 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>
4

2 回答 2

2

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

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

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

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

这样，当 figcaption 默认隐藏但当您单击目标并且 javascript 添加类“open”时，figcaption 将可见。你当然不必让它显示块，它可以是“无”以外的任何东西。

于 2013-04-05T14:46:05.173 回答
1

如果这段代码

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

正在显示 figcaption 并且open当figure你想显示它时，你可以使用：

figure:hover figcaption, figure.open figcaption {
    margin-bottom: 0px;
}
于 2013-04-05T13:50:51.657 回答