CSS accessing different list items

Question

I have an HTML document and a CSS file. In the first Unordered list (id = fullimage) there are 4 paragraph elements that act as captions for the 4 images. They are listed after each image element.

The second list are thumbimages that provide a sliding animation when hovered over. What I would also like to do is show the caption (the p element) when the thumbimage is hovered over. How would I accomplish this? Here is the CSS and HTML code

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>

The Fiddle link is http://fiddle.jshell.net/n0ky9fLk/. I am not able to use Javascript or change the GUI. I have to have a p as a caption in the first unordered list. I am pasting the relevant part of the directions "The first unordered list has an id called fullimage. The list will have four bullets.

For each li inside the first ordered list, you will create an image tag followed by a paragraph tag. Also, each li will have an id with the name of the image (lowercase and no file extension) that will be display."

and for the CSS.. "Finally, we want to make sure that the paragraph with the name of the image (inside the first list) is displayed on top of the image and with a transparent background. We also font VERDANA, size 18 pixels, bold, color $FFF, position absolute, bottom position 30pixels, width 100%, and background color rgba(0,0,0,.5). The parameter .5 is the transparency."

please use fiddle[http://fiddle.jshell.net/] to let us see what you have already. — Shirin Abdolahi, Oct 12 '14 at 06:32
Conditional styling where one element can affect the other is still in the newest drafts and can't be used yet in production. You really might want to consider JavaScript for this. If you're not able to use JavaScript you have to find another way to implement how your GUI works. — , Oct 12 '14 at 07:01
You could try doing something like Jobayer said, just put opacity on `p` to 0, and then when hovering put opacity to your liking. That way you can add transitions to smooth it out... — dingo_d, Oct 12 '14 at 07:46

score 0 · Answer 1 · answered Oct 12 '14 at 07:09

0

You can do it using javascript quite easily. Use individual id for every p element with initial css display property to none & call js function when hovering & make specific id to visible using document.getElementById("id").display = 'block'. you need to write function like that -

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

answered Oct 12 '14 at 07:09

Jobayer

1,221
1
14
22

I hope this link is helpful for you http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time – Jobayer Oct 12 '14 at 07:24

score 0 · Answer 2 · edited May 23 '17 at 12:05

You can also do it using css, check it - 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;
    }

Check this links Using only CSS, show div on hover over <a>, you will find more information about it.

CSS accessing different list items

2 Answers2