不能同时放置超链接和一般兄弟组合器？

Question

Hey guys I'm really new to css so I'll try to explain this the best I could.

I'm trying to create an image hyperlink .link so that whenever I hover my mouse pointer over it, .link and .picture "changes" their image. But I still want the hyperlink to be 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 problem with my code is that while .link may be clickable, picture doesn't change its background-image when I hover on .link . I hope someone can help me. Thanks in advance!

Answer 1

 Try this one 
 <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

I am not sure whether general sibling combinaton can be select from one sibling but you can do it using different way.

As wrapping both element( a and div ) to another div element then you can select Selects all .pictures classes where the parent is a .container class like the below.

.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>

look for selectors that you can use in css. css selectors

I think this will met what you want to do!.