وب کمپ

سلام

گاها دوست داریم، وقتی روی یک المانی هاور میشه، کدهای خاصی به کدهای همسایه اون اعمال کنیم. یک نمونه در زیر آورده شده است:

HTML

<div id="parent">
  <!-- control should come before the target -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

CSS

#parent {
  position: relative;
  background-color: #eee;
  height: 100px;
  width: 300px;
}

#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

#target {
  border: 1px solid maroon;
  text-align: center;
}

https://jsfiddle.net/onury/0un6k1jq

نکته: بخش Target یا همان بخشی که کدهای هاور روی اون اعمال میشه، بایستی در HTML بعد از دکمه قرار بگیرد.