Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Question

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue.

I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperlink, while still keeping it clickable.

.picture {
  background-image: url('imageB1.jpg');
  width: 100px;
  height: 100px;
}

.link {
  background-image: url('imageA1.jpg');
  width: 100px;
  height: 100px;
}

.link:hover {
  background-image: url('imageA2.jpg');
}

.link:hover+.picture {
  background-image: url('imageB2.jpg');
}

<a href="destination.html">
  <div class="link"></div>
</a>
<div class="picture"></div>

The issue I'm facing is that although .link is clickable, the picture does not change its background-image when I hover over .link. Any help would be greatly appreciated. Thank you!

html css hyperlink css-selectors

Answer 1

Answer №1

 Here is a different example to consider:
 <a href="destination.html" >
 <div class="link">
  </div>
  </a>
  <div class="picture"></div>



 .picture {
 background-image: url('imageB1.jpg');
 width: 100px;
 height: 100px;
  display:none;
  }

.link {
background-image: url('imageA1.jpg');
width: 100px;
height: 100px;
display:block;
 }

 .link:hover {
  content: url('imageA2.jpg');
  }

   .link:hover+.picture {
   background-image: url('imageB2.jpg');
     }

Answer 2

 Here is a different example to consider:
 <a href="destination.html" >
 <div class="link">
  </div>
  </a>
  <div class="picture"></div>



 .picture {
 background-image: url('imageB1.jpg');
 width: 100px;
 height: 100px;
  display:none;
  }

.link {
background-image: url('imageA1.jpg');
width: 100px;
height: 100px;
display:block;
 }

 .link:hover {
  content: url('imageA2.jpg');
  }

   .link:hover+.picture {
   background-image: url('imageB2.jpg');
     }

Answer 3

Answer №2

Is it possible to select a general sibling combination from one sibling? It may not be straightforward, but there is an alternative method.

You can wrap both the elements (a and div) in another div element, allowing you to then select all .pictures classes where the parent is a .container class like so:

.picture {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}

.link {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}

.link:hover {
  background-image: url('db 2 assignment schedule.png');
}

.container:hover > .picture {
  background-image: url('db 2 assignment schedule.png');
}
</style>

<div class="container">
<a href="destination.html">
  <div class="link"></div>
</a>
<div class="picture"></div>
</div>

Explore different selectors that can be used in CSS at css selectors

This approach should achieve what you are looking to do!

Answer 4

Is it possible to select a general sibling combination from one sibling? It may not be straightforward, but there is an alternative method.

You can wrap both the elements (a and div) in another div element, allowing you to then select all .pictures classes where the parent is a .container class like so:

.picture {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}

.link {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}

.link:hover {
  background-image: url('db 2 assignment schedule.png');
}

.container:hover > .picture {
  background-image: url('db 2 assignment schedule.png');
}
</style>

<div class="container">
<a href="destination.html">
  <div class="link"></div>
</a>
<div class="picture"></div>
</div>

Explore different selectors that can be used in CSS at css selectors

This approach should achieve what you are looking to do!

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Answer №1

Answer №2

Similar questions

What is the best way to retrieve child component elements from the parent for testing in Angular 2?

Click here to navigate to the same or a different page using an anchor

Is it required for IDs in CSS to always correspond to a single element? How should IDs be handled if the same element is repeated multiple times on

Incorporate Angular directives within a tailor-made directive

Several HTML dropdown menus that do not expand

Solving dependencies for npm modules

Adding a div element to the canvas and generating a DataURL is currently experiencing technical difficulties

Ensure that both the div element and its contents are restricted to a maximum width of

What are some tips for managing the hover effect using CSS3?

The functionality of `config.assets.debug = true` fails to

Eliminate empty space in the table cell

Mobile-friendly website with consistent design across all devices

Creating a Redirect Form that Directs Users to a Specific Page Depending on Input Data

Is it possible for me to adjust these two images to fit the screen perfectly?

Utilizing Jquery tabs for consistent height display

HTML5 Video Frozen in Place on Screen's Edge

Can a stroke in an SVG image be created using a gradient color?

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

Tips for including a hyperlink in a collapsible element within a dropdown menu using Bootstrap 5

Using HTML nested lists in Wordpress sites