訪問不同列表項的CSS

我有一個HTML文檔和一個CSS文件。在第一個Unordered列表（id = fullimage）中，有4個段落元素作爲4張圖片的標題。它們在每個圖像元素之後列出。訪問不同列表項的CSS

第二個列表是縮略圖，它提供了一個滑動動畫。我還想做的是在縮略圖懸停時顯示標題（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，並且顯示圖像的名稱（小寫，沒有文件擴展名）。「「

and the CSS .. 」最後，我們要確保圖像名稱（位於第一個列表中）的段落顯示在圖像頂部並具有透明背景。 VERDANA，大小18像素，粗體，顏色$ FFF，絕對位置，底部位置30像素，寬度100％，背景顏色rgba（0,0,0，.5）。參數.5是透明度。

來源

2014-10-12 user1294476

請使用小提琴[http://fiddle.jshell.net/]讓我們看看你已經有了什麼。 – 2014-10-12 06:32:36

有條件的樣式，其中一個元素可以影響另一個元素仍然在最新的草稿中，並且不能在生產中使用。你真的可能想爲此考慮JavaScript。如果你不能使用JavaScript，你必須找到另一種方法來實現GUI的工作方式。 – 2014-10-12 07:01:48

你可以嘗試像Jobayer說的那樣，只是把'p'上的不透明度設置爲0，然後當懸停時將不透明度設置爲您的喜好。這樣，你可以添加轉換，以平滑它... – 2014-10-12 07:46:08

你可以很容易地使用JavaScript來做到這一點。使用個人ID爲每個p元素初始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'; 
}

來源

2014-10-12 07:09:56 Jobayer

我希望這個鏈接對你有幫助http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-與此同時 – Jobayer 2014-10-12 07:24:31

您還可以使用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>，你會發現更多關於它的信息。

來源

2014-10-12 07:33:54 Jobayer

訪問不同列表項的CSS

回答

相關問題