CSS 访问不同的列表项答案

【问题标题】：CSS accessing different list itemsCSS 访问不同的列表项
【发布时间】：2014-10-12 15:33:54
【问题描述】：

我有一个 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 作为标题。我正在粘贴方向的相关部分“第一个无序列表有一个名为 fullimage 的 id。该列表将有四个项目符号。

对于第一个有序列表中的每个 li，您将创建一个图像标签，后跟一个段落标签。此外，每个 li 都会有一个带有要显示的图像名称（小写且无文件扩展名）的 id。"

对于 CSS.. “最后，我们要确保带有图像名称的段落（在第一个列表内）显示在图像顶部并具有透明背景。我们还使用 VERDANA 字体，大小 18 像素，粗体，颜色 $FFF ，绝对位置，底部位置 30pixels，宽度 100%，背景颜色 rgba(0,0,0,.5)。参数 .5 为透明度。"

【问题讨论】：

请使用 fiddle[fiddle.jshell.net/] 让我们看看你已经拥有什么。
一个元素可以影响另一个元素的条件样式仍在最新的草稿中，还不能在生产中使用。你真的可能想为此考虑 JavaScript。如果你不能使用 JavaScript，你必须找到另一种方法来实现你的 GUI 的工作方式。
你可以尝试像 Jobayer 所说的那样做，只需将 p 的不透明度设置为 0，然后在悬停时根据自己的喜好设置不透明度。这样你就可以添加过渡来平滑它...

标签： html css

【解决方案1】：

你可以很容易地使用 javascript 来做到这一点。对每个 p 元素使用单独的 id，初始 css 显示属性为无，并在悬停时调用 js 函数，并使用 document.getElementById("id").display = 'block' 使特定 id 可见。你需要写这样的函数 -

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

【讨论】：

希望这个链接对你有帮助stackoverflow.com/questions/17393231/…

【解决方案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>，您将找到有关它的更多信息。

【讨论】：