CSS, доступ к различным элементам списка

У меня есть документ HTML и файл CSS. В первом неупорядоченном списке (id = fullimage) есть 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 или изменять графический интерфейс. Я должен иметь p как подпись в первом неупорядоченном списке. Я вставляю соответствующую часть направлений «Первый неупорядоченный список имеет идентификатор, называемый fullimage. Список будет содержать четыре пули.

Для каждого li внутри первого упорядоченного списка вы создадите тег изображения, за которым следует абзац Кроме того, каждый li будет иметь идентификатор с именем изображения (нижний регистр и без расширения файла), который будет отображаться. "

и для CSS .. «Наконец, мы хотим убедиться, что абзац с именем изображения (внутри первого списка) отображается поверх изображения и с прозрачным фоном. VERDANA, размер 18 пикселей, полужирный, цвет $ FFF, абсолютная позиция, нижнее положение 30 пикселей, ширина 100% и цвет фона rgba (0,0,0, .5). Параметр .5 - прозрачность. "

источник

2014-10-12 user1294476

используйте скрипку [http://fiddle.jshell.net/], чтобы мы могли видеть, что у вас уже есть. –

Условный стиль, в котором один элемент может воздействовать на другой, все еще находится в новейших черновиках и еще не может использоваться в производстве. Вы действительно можете рассмотреть JavaScript для этого. Если вы не можете использовать JavaScript, вам нужно найти другой способ реализации вашего графического интерфейса. –

Вы можете попробовать сделать что-то вроде Jobayer, просто поместите непрозрачность на 'p' на 0, а затем, когда наведите указатель на непрозрачность по своему вкусу. Таким образом, вы можете добавить переходы, чтобы сгладить его ... –

Вы можете сделать это с помощью javascript довольно легко. Использовать индивидуальный идентификатор для каждого элемента p с исходным значением свойства css none none & Функция вызова js при наведении & делает конкретный идентификатор видимым с помощью document.getElementById («id»). Display = 'block'. вам нужно написать функцию, как что -

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

Вы также можете сделать это с помощью 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, доступ к различным элементам списка

ответ

Смежные вопросы