Jquery 如何在悬停并单击的照片上添加标题覆盖？_Jquery_Html_Css_Image_Caption

Jquery 如何在悬停并单击的照片上添加标题覆盖？

jquery html css image

Jquery 如何在悬停并单击的照片上添加标题覆盖？,jquery,html,css,image,caption,Jquery,Html,Css,Image,Caption,我正在尝试为照片添加标题。我希望名称始终显示在照片下方，同时我希望标题在鼠标悬停和单击时显示（并在再次单击之前保持可见）。这可能吗？我可以分别做这两个动作，但不能同时做我的另一个选择是在普通屏幕上使用鼠标悬停，在手机上使用单击选项以下是我的工作内容： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque

我正在尝试为照片添加标题。我希望名称始终显示在照片下方，同时我希望标题在鼠标悬停和单击时显示（并在再次单击之前保持可见）。这可能吗？我可以分别做这两个动作，但不能同时做

我的另一个选择是在普通屏幕上使用鼠标悬停，在手机上使用单击选项

以下是我的工作内容：

<!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>


$（文档）.ready（函数（）{
$（“img”）。单击（函数（）{
$（“p”）.toggle（）；
});
});
.集装箱{
位置：相对位置；
宽度：400px；
}
.形象{
不透明度：1；
显示：块；
宽度：100%；
高度：自动；
过渡：放松；
背面可见性：隐藏；
}
.中{
过渡：0.5s缓解；
不透明度：0；
宽度：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：转换（-50%，-50%）
}
p{
背景色：无；
字体系列：无衬线；
字体：斜体；
颜色：黑色；
字体大小：14px；
线高：24px；
填充：12px 12px；
}
.container:hover.image{
不透明度：0.2；
}
.容器：悬停。中间{
不透明度：1；
}
.文本p{
背景色：无；
字体系列：无衬线；
字体：斜体；
颜色：黑色；
字体大小：14px；
线高：24px；
文本对齐：居中；
填充：12px 12px；
}
Rodney Erickson是HubSpot的内容营销专业人员，HubSpot是一个入站营销和销售平台，帮助公司吸引访客、转换潜在客户和接近客户。此前，罗德尼曾担任一家科技软件初创公司的营销经理。他以优异成绩毕业于哥伦比亚大学，获得工商管理和创意写作双学位。”
RODNEY ERICKSON，M.B.A.
内容营销

谢谢：）

当然可以，所以我不会在单击时使用javascript切换标题本身，而是使用javascript切换容器上的类

然后，在CSS中，您可以确保当容器悬停在上面时，或者当它有那个特殊类时，这两种情况都会显示标题。其他任何时候，您的标题都会被隐藏

希望这有帮助