个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试为照片添加说明。我希望名称始终显示在照片下方，而我希望标题显示在悬停时和单击时(并保持可见直到再次单击)。这可能吗？我可以分别执行这两个操作，但不能同时执行。
我的另一个选择是在普通屏幕上使用悬停，在移动设备上使用点击选项。
这是我正在使用的:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").click(function(){
$("p").toggle();
});
});
</script>
<style>
.container {
position: relative;
width: 400px;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: 0.5s ease;
opacity: 0;
width:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
p {
background-color: none;
font-family:sans-serif;
font-style:italic;
color: black;
font-size: 14px;
line-height:24px;
padding: 12px 12px;
}
.container:hover .image {
opacity: 0.2;
}
.container:hover .middle {
opacity: 1;
}
.text p{
background-color: none;
font-family:sans-serif;
font-style:italic;
color: black;
font-size: 14px;
line-height:24px;
text-align: center;
padding: 12px 12px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://static1.squarespace.com/static/511526cde4b067782b69109c/517aa359e4b0ab81ac8d931c/517aa396e4b041a7f26623d5/1366991956677/05-corporate-headshot-photo-WBEZ+-+Chicago+Public+Media_Edwards_Steve_Programming_120328_1210.psd.JPG-1500px.JPG" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<p class="text">Rodney Erickson is a content marketing professional at HubSpot, an inbound marketing and sales platform that helps companies attract visitors, convert leads, and close customers. Previously, Rodney worked as a marketing manager for a tech software startup. He graduated with honors from Columbia University with a dual degree in Business Administration and Creative Writing."</p>
</div>
<p>RODNEY ERICKSON, M.B.A.<br>Content Marketing</p>
</div>
</body>
</html>
谢谢:)
最佳答案
当然，所以我不会使用 javascript 在点击时切换您的标题本身，而是使用 javascript 在您的容器上切换一个类。
然后在 CSS 中，您可以确保当鼠标悬停在容器上时，或者当它具有那个特殊类时，这两种情况都会显示标题。在任何其他时间，您的标题都会被隐藏。
希望这对您有所帮助!
关于jquery - 如何在鼠标悬停并单击时向照片添加字幕叠加层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41494411/
25
4
0
我正在学习WidgetMarqueeLabel课: #include "WidgetMarqueeLabel.h" #include #include WidgetMarqueeLabel::Wi
我需要使用 Graphviz DOT 打印大量图表。为了区分每个图对应的输入，我还希望每个图都有一个标题。有没有办法将它嵌入到图形的 DOT 表示中。 最佳答案 您可以使用 label为图表添加标题。
我用 jQuery 编写了一个简单的脚本，允许根据 .hover 触发器弹出和弹出标题。 问题是您必须将鼠标悬停在图像上，移回图像上，然后再次将鼠标悬停在图像上才能正常工作。 (你可以在这里明白我的意
我已经成功地将视频转换到 chromecast 现在我正在尝试添加对字幕的支持，这里我面临两个问题 当我使用 NanoHttpd 流式传输 vtt 文件时，chromecast 返回错误代码 2100
我想知道 HTML 选框是否允许在控件(或容器)的开头使用静态文本，以便当文本向左滑动时它会滑动传递文本？ 例如。 我正在查看要静态对齐到左侧的日期，数据库中的文本将滑过它，然后从右侧重新出现。 HT
如何在ExoPlayer2上设置字幕？我试过这个 tu bild MergingMediaSource: SingleSampleMediaSource singleSampleSource
我正在使用 FFMPEG 使用如下命令刻录字幕: ffmpeg -i video.mp4 -vf "subtitles=subs.srt:force_style='Fontsize=24,Primar
我有一个输入文件，它基本上是一个 .ts 文件，其中包含 4 个 dvb 字幕流(嵌入其中)。我正在使用以下命令在输出视频中保留 dvb 字幕。 ffmpeg -i Input.ts -c:a cop
假设我想查找副标题中包含“法国总统选举”一词的视频列表。 我可以使用 YouTube API 做到这一点吗？ 如果它甚至可以在人工生成和自动生成的字幕中搜索，那将是完美的。但是如果它可以搜索两种类型的
我正在尝试将 YouTube 视频嵌入 YouTube iframe。 视频有一个 yt:cc=on 标签，这意味着默认情况下会加载字幕。 (即使用户不想要，属性 cc_load_policy=1 也
我正在使用 ggplot2 来改进降水条形图。 这是我想要实现的可重现示例: library(ggplot2) library(gridExtra) secu <- seq(1, 16, by=2)
我正在尝试从外部 url 播放电影的字幕，但它不起作用，当我尝试添加本地存储的 vtt 文件时，它就起作用了。下面是代码 上面的代码不起作用。但是当我复制 vtt 的内容时它起作用了。 请
我有一个包含单元格的表格，其中只有在搜索了某些内容后才会出现副标题。这是 cellForRowAtIndexPath 的代码: - (UITableViewCell *)tableView:(UITa
不确定这是不是该问的地方，但我在其他地方运气不好，之前经常通过查看其他人在本网站上的问题和答案来设法找到问题的答案。 我最近安装了一个 WordPress 插件 (WP Subtitle)，它允许我为
我正在使用 ActionBarSherlock 字幕并尝试使用样式更改字幕文本大小，但似乎不起作用。我对主题不太熟悉，所以..我该如何更改？？ 提前致谢 最佳答案 @style/Widget
跑马灯动画不行，这是我做的。 它适用于第一个 TextView ，但不适用于第二个。我究竟做错了什么？ 最佳答案 这对我
如何以编程方式获取正在播放的 YouTube 视频的字幕？ 最初我尝试通过 YouTube API 离线进行, 但是 as it seems YouTube 禁止获取您不是所有者的视频的字幕。 现在我
由于 AVPlayer 渲染的隐藏式字幕有时会与其他 UI 组件重叠，我想在单独的 View 中渲染 cc。 我可以通过将 closedCaptionDisplayEnabled 设置为 NO 来关闭
这有点与 Does YouTube API forbid to download video captions if you are not it's owner? 重复的问题, Get YouTub
因此，我尝试使用默认的 chrome 发送器应用程序为 chromecast 设置隐藏式字幕，根据文档，这应该是可能的，as seen here 。我不明白为什么我的代码不起作用。它与提供的示例代码几
我是一名优秀的程序员,十分优秀！