Question

嘿伙计们我对CSS很陌生，所以我会尽力解释这个。

我正在尝试创建一个图像超链接 .link ，这样每当我将鼠标指针悬停在它上面时， .link 和 .picture “改变”他们的形象。但我仍然希望超链接可以点击。

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

我的代码存在的问题是，当 .link 可以点击时，当我将鼠标悬停在 .link <时，图片不会更改其背景图片/ em>的。我希望有一个人可以帮助我。提前谢谢！

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

我不确定是否可以从一个兄弟姐妹中选择一般兄弟姐妹组合，但你可以用不同的方式来做。

在将元素（ a和div ）包装到另一个div元素时，您可以选择选择所有 .pictures 类，其中父级是 .container < / strong>类如下。

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

寻找可以在css中使用的选择器。 css selectors

我认为这会满足您的目标！

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

2 个答案: