Child elements not working with general sibling selectors

HTML & CSS
1

Hello my friends:

I have an html page containing elements as indicated in the code below: The goal is to have a larger image and a caption visible when the thumb is hover.

The problem is; if I wrap the anchor in a parent element then the code does not work: How do I get this to work even if the anchor is not the parent element?

For example: Doing this will not work, it will only work if the anchor is a parent to the image element. I need to place the images in a unordered list.

<li>
    <a class="thumb1" href="#">
    <img src="images/main-image1-thumb" width="100" height="75">
    </a>
</li>

Here is a sample of the complete code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>

<style type="text/css">

#placeHolder{
    display: none;
    margin: 0;
    padding: 0;
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: top left;
}

#placeHolder figure{
    display: none;
}

.thumb1:hover ~ #placeHolder,
.thumb1:hover ~ #placeHolder figure{
    background-image: url(images/main-image1.jpg);
    display: block;
}

</style>

</head>

<body>
<a class="thumb1" href="#">
<img src="images/main-image1-thumb.jpg" width="100" height="75">
</a>

<div id="placeHolder">
<figure>
I am Caption #1
</figure>
</div>
</body>

</html>
2

It would be handy if you could post a Pen (codepen.io) with the code as close as you can get it—images in place etc. Here’s a guide to doing that: Forum Posting Basics

3

I have added the complete working HTML including the CSS. Thanks for the heads up.

4

Hi there Novice2010,

the <div id=“placeHolder”> ceases to be a sibling of the <a class=“thumb1” href=“#”>
when it no longer shares the same parent.

One possible solution could be to code it like this…

[code]

Example ul { margin:0; padding:0; list-style-type:none; } li { position:relative; } #placeHolder { position:absolute; top:75px; /*adjust value to taste */ left:100px; /*adjust value to taste */ display:none; width:400px; height:300px; background-repeat:no-repeat; background-position:top left; } .thumb1:hover~#placeHolder { background-image:url(images/main-image1.jpg); display:block; }
  • I am Caption #1
[/code]

coothead

5

I was just reading more on this website about these selectors:
https://css-tricks.com/child-and-sibling-selectors/.

Initially, the reason I did not go your suggested route is because I was going to use one element for multiple place holders. Meaning if I had 100 thumb images, then I will rotate the main image in a single placeholder but with individual elements for the caption:

However, this will no longer work because I will need to create additional elements for each placeholder so that they are in the same parent element.

My understanding regarding the sibling selectors is they must be either adjacent or share the same parent, correct?

This is what I have come up with:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallary Example</title>

<style type="text/css">

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 210px;
    height: 160px;
    background-color: #090;
}

ul li{
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    background-color: #F00;
    width: 100px;
    height: 75px;
}

ul li figure,
ul li figure img, 
ul li figure a {
    border: none;
    outline: none;
    text-decoration: none;
    display: block;
    width: 100px;
    height: 75px;
    margin: 0;
    padding: 0;
}

ul li figure img{
    vertical-align: bottom;
}

ul li:nth-child(1){
    margin: 0px 10px 0px 0px;
}

ul li:nth-child(3){
    margin: 10px 10px 0px 0px;
}

ul li:nth-child(4){
    margin: 10px 0px 0px 0px;
}

figcaption{
    display: none;
    margin: 0;
    padding: 0;
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: top left;
    position: absolute;
    left: 500px;
}

figure figcaption{
        display: none;
}

.thumb2:hover + figcaption {
    background-image: url(images/photo2.jpg);
    display: block;
}

.thumb3:hover + figcaption {
    background-image: url(images/photo3.jpg);
    display: block;
}

.thumb4:hover + figcaption {
    background-image: url(images/photo4.jpg);
    display: block;
}

.thumb6:hover + figcaption {
    background-image: url(images/photo6.jpg);
    display: block;
}
</style>

</head>

<body>

<ul>
<li>
 <figure>
  <a class="thumb2" href="#">
  <img src="images/photo2thumb.jpg" width="100" height="75">
  </a> 
  
  <figcaption>
  This is Caption for Image 1:
  </figcaption>  
</figure> 

</li>

<li>
 <figure>
  <a class="thumb3" href="#">
  <img src="images/photo3thumb.jpg" width="100" height="75">
  </a> 
  
  <figcaption>
   This is Caption for Image 2:
  </figcaption>  
</figure> 
</li>

<li>
 <figure>
  <a class="thumb4" href="#">
  <img src="images/photo4thumb.jpg" width="100" height="75">
  </a> 
  
  <figcaption>
   This is Caption for Image 3:
  </figcaption>  
</figure> 
</li>

<li>
 <figure>
  <a class="thumb6" href="#">
  <img src="images/photo6thumb.jpg" width="100" height="75">
  </a> 
  
  <figcaption>
  This is Caption for Image 4:
  </figcaption>  
</figure> 
</li>
</ul>

</body>
</html>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.