Question

我有一个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>

小提琴链接是http://fiddle.jshell.net/n0ky9fLk/。我无法使用Javascript或更改GUI。我必须在第一个无序列表中有一个p作为标题。我正在粘贴方向的相关部分＆＃34;第一个无序列表有一个名为fullimage的id。该清单将有四颗子弹。

对于第一个有序列表中的每个li，您将创建一个图像标记，后跟段落标记。此外，每个li都会有一个id，其中包含将要显示的图像名称（小写且没有文件扩展名）。＆＃34;

并为CSS .. ＆＃34;最后，我们要确保带有图像名称的段落（在第一个列表中）显示在图像顶部并具有透明背景。我们还字体VERDANA，大小18像素，粗体，颜色$ FFF，位置绝对，底部位置30像素，宽度100％和背景颜色rgba（0,0,0，.5）。参数.5是透明度。＆＃34;

Answer 1

你可以很容易地使用javascript来做到这一点。对每个p元素使用单独的id，初始css显示属性为none＆amp;在悬停时调用js函数＆amp;使用document.getElementById（“id”）使特定ID可见.display ='block'。你需要写那样的函数 -

function p1(){
   document.getElementById("id1").display = 'block';
   document.getElementById("id2").display = 'none';
   document.getElementById("id3").display = 'none';
}

Answer 2

你也可以使用css，检查它 - http://jsfiddle.net/MBLZx/

html

 <div class="showhim">
    HOVER ME
    <div class="showme">hai</div>
    <div class="ok">ok</div>
    </div>

CSS

 .showme{ 
    display: none;
    }
   .showhim:hover .showme{
    display : block;
    }
   .showhim:hover .ok{
    display : none;
    }

检查此链接Using only CSS, show div on hover over <a>，您会找到有关它的更多信息。

CSS访问不同的列表项

2 个答案: