xhtml - CSS: Hover one element, effect for multiple elements?

Question

Welcome To Ask or Share your Answers For Others

xhtml - CSS: Hover one element, effect for multiple elements?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

xhtml - CSS: Hover one element, effect for multiple elements?

I'm looking for a method for my hovering issue.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>


</div>

Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:24:18+0000

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

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

Categories

xhtml - CSS: Hover one element, effect for multiple elements?

xhtml - CSS: Hover one element, effect for multiple elements?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags