Html CSS访问不同的列表项_Html_Css

Html CSS访问不同的列表项

html css

Html CSS访问不同的列表项,html,css,Html,Css,我有一个HTML文档和一个CSS文件。在第一个无序列表（id=fullimage）中，有4个段落元素作为4个图像的标题。它们列在每个图像元素之后第二个列表是当鼠标悬停在上方时提供滑动动画的拇指图像。我还想做的是在thumbimage悬停时显示标题（p元素）。我将如何做到这一点？下面是CSS和HTML代码 body { background-color:#d9d6cb; } #title { font-family:Agency FB; text-shadow:5px 0px

我有一个HTML文档和一个CSS文件。在第一个无序列表（id=fullimage）中，有4个段落元素作为4个图像的标题。它们列在每个图像元素之后

第二个列表是当鼠标悬停在上方时提供滑动动画的拇指图像。我还想做的是在thumbimage悬停时显示标题（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>

正文{
背景色：#d9d6cb；
}
#头衔{
字体系列：代理FB；
文本阴影：5px 0px 3px灰色；
文本对齐：居中；
}
#我的画廊{
宽度：580px；
填充：20px；
左边距：自动；
右边距：自动；
背景：黑色；
}
#全像
{
列表样式：无；
宽度：580px；
高度：400px；
保证金：0；
填充：0；
溢出：隐藏；
}
#拇指图像
{
列表样式：无；
溢出：自动；
浮动：对；
左边距：5px；
边框颜色：白色；
不透明度：.5；
}
#拇指图像李{
位置：相对位置；
左：10px；
宽度：50px；
高度：50px；
显示：内联；
}
#拇指图像李：悬停{
不透明度：.5；
-webkit动画：slideImage 1s；
动画：slideImage 1s；
}
@-webkit关键帧幻灯片图像{
0%：{左：-700px；}
100%{左：0px；}
}
@-moz关键帧滑动图像{
0%{左：-700px；}
100%{左：0px；}
}
#全像p{
字体系列：VERDANA；
字号：18px；
字体大小：粗体；
颜色：#FFFFFF；
位置：绝对位置；
底部：30px；
宽度：100%；
背景色：rgba（0,0,0,5）；
不透明度：.5；
}
指数
图像库


房子


树


霍比特人洞


马

小提琴的链接是。我无法使用Javascript或更改GUI。在第一个无序列表中，我必须有一个p作为标题。我正在粘贴方向的相关部分“第一个无序列表有一个名为fullimage的id。该列表将有四个项目符号

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

对于CSS。。

“最后，我们希望确保带有图像名称（在第一个列表中）的段落显示在图像顶部，背景透明。我们还使用VERDANA字体、大小18像素、粗体、颜色$FFF、绝对位置、底部位置30像素、宽度100%和背景色rgba（0,0,0,5）.参数.5是透明度。”

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

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

您也可以使用css来执行此操作，请选中-

html

查看此链接，您将找到有关它的更多信息。

请使用fiddle让我们看看你已经拥有了什么。一个元素可以影响另一个元素的有条件的样式仍然在最新的草稿中，并且不能在生产中使用。你可能真的想考虑JavaScript。如果你不能使用JavaScript，你必须找到另一种方式来实现你的GUI是如何工作的。你可以试着做一些事情。ke Jobayer说，只需将不透明度设置为0，然后在鼠标悬停时根据您的喜好设置不透明度。这样您就可以添加过渡来平滑它…我希望此链接对您有所帮助

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

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