CODEWITHSUNDEEP
htmlcss
user2649762
user2649762

Reputation: 581

Respond to CSS hover selector if covered by another element

I know that I can just disable pointer events on the covering elements, but I don't want to do that. I want both the covering and the covered elements to respond to mouse events, so that they both transition into the state corresponding to the hover selector when the mouse pointer touches them both.

Upvotes: 0

Views: 211

Answers (1)

SparkFountain
SparkFountain

Reputation: 2270

You can define a parent container around the DOM elements that you would like to track for hovering. This StackOverflow thread shows a simple approach with a parent div having the class "section". It contains two elements that should both have a border around when hovering (code snippet is cited from this answer post):

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

Upvotes: 2

Related Questions