我有一个HTML文档和一个CSS文件。在第一个无序列表（id = fullimage）中，有4个段落元素用作4个图像的标题。它们在每个图像元素之后列出。
第二个列表是悬停时提供滑动动画的缩略图。我还想做的是在将鼠标悬停在缩略图上时显示标题（p元素）。我将如何完成？这是CSS和HTML代码
body {
background-color:#d9d6cb;
}
#title {
font-family:Agency FB;
text-shadow:5px 0px 3px gray;
text-align:center;
}
#mygallery{
width:580px;
padding:20px;
margin-left: auto;
margin-right: auto;
background:black;
}
#fullimage
{
list-style:none;
width:580px;
height:400px;
margin:0;
padding:0;
overflow:hidden;
}
#thumbimage
{
list-style:none;
overflow:auto;
float:right;
margin-left:5px;
border-color:white;
opacity:.5;
}
#thumbimage li{
position:relative;
left:10px;
width:50px;
height:50px;
display:inline;
}
#thumbimage li:hover{
opacity:.5;
-webkit-animation: slideImage 1s;
animation: slideImage 1s;
}
@-webkit-keyframes slideImage{
0%:{left:-700px;}
100%{left:0px;}
}
@-moz-keyframes slideImage{
0%{left:-700px;}
100%{left:0px;}
}
#fullimage p {
font-family:VERDANA;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
position:absolute;
bottom:30px;
width:100%;
background-color:rgba(0,0,0,.5);
opacity:.5;
}
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="Gallery/CSS/style.css">
</head>
<body>
<h1 id ="title"> Image Gallery </h1>
<div id="mygallery">
<ul id = "fullimage">
<li>
<img id = "house" src ="Gallery/Images/House.jpg" alt = "House" width = "580">
<p>House</p>
</li>
<li>
<img id = "tree" src = "Gallery/Images/tree.jpg" alt = "Tree" width = "580">
<p>Tree</p>
</li>
<li>
<img id = "hobbithole" src = "Gallery/Images/HobbitHole.jpg" alt = "Hobbit Hole" width = "580">
<p> Hobbit Hole </p>
</li>
<li>
<img id = "horses" src = "Gallery/Images/horses.jpg" alt = "Horses" width = "580">
<p>Horses</p>
</li>
</ul>
<ul id = "thumbimage">
<li>
<a href = "Gallery/Images/House.jpg">
<img src ="Gallery/Images/House.jpg" alt = "House" width = "50">
</a>
</li>
<li>
<a href = "Gallery/Images/tree.jpg"><img src ="Gallery/Images/tree.jpg" alt = "tree" width = "50">
</a>
</li>
<li>
<a href = "Gallery/Images/HobbitHole.jpg">
<img src ="Gallery/Images/HobbitHole.jpg" alt = "Hobbit Hole" width = "50">
</a>
</li>
<li>
<a href = "Gallery/Images/horses.jpg">
<img src ="Gallery/Images/horses.jpg" alt = "horses" width = "50">
</a>
</li>
</ul>
</div>
</body>
</html>
Fiddle链接为http://fiddle.jshell.net/n0ky9fLk/。我无法使用Javascript或更改GUI。我必须在第一个无序列表中以p作为标题。我要粘贴方向的相关部分：“第一个无序列表的ID为全图。该列表将有四个项目符号。
对于第一个有序列表中的每个li，您将创建一个图像标签，然后创建一个段落标签。另外，每个li都有一个ID，其中包含要显示的图像名称（小写且没有文件扩展名）。”
对于CSS
“最后，我们要确保带有图像名称的段落（在第一个列表中）显示在图像顶部并具有透明背景。我们还为VERDANA字体设置了字体，大小18像素，粗体，颜色$ FFF ，绝对位置，底部像素30个像素，宽度100％和背景颜色rgba（0,0,0，.5）。参数.5是透明度。”
最佳答案
您可以使用javascript轻松完成此操作。对每个具有初始css display属性的p元素使用单独的id，将其设置为none并在悬停时调用js函数，并使用document.getElementById（“ id”）。display ='block'使特定ID可见。您需要编写类似的功能-
function p1(){
document.getElementById("id1").display = 'block';
document.getElementById("id2").display = 'none';
document.getElementById("id3").display = 'none';
}