我在寻找一种方法来解决我的悬停问题.

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

现在,图像和图层这两个类都有边界.两者对于正常和悬停都有不同的 colored颜色 . 有没有办法让我悬停Layer类,那么Layer类和Image类悬停边框 colored颜色 都是活动的?反之亦然?

推荐答案

为此,您不需要JavaScript.

一些CSS会这样做.下面是一个例子:

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

Css相关问答推荐

如何使用css创建带有曲线的自定义按钮

CSS Grid,意想不到的差距

在Powershell中使用正则表达式编辑css文件

MUI Reaction移除焦点上的轮廓边框

如何在CSS中实现边框的局部透明?

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿?

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中?

带插值的 Sass 数学函数

和号 (&) 作为 SASS @mixin 中的变量

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

如何制作一个居中的标题样式,其中换行符将最长的行排列在底部

CSS - 等高列?

滚动到该 div 后如何使 div 固定?

固定元素在 Chrome 中消失

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

Bootstrap 3 Glyphicons CDN

div内的CSS中心内容

数据协议 URL 大小限制

为什么 CSS 中的光标:指针效果不起作用

如何在 CSS 中给出背景图像路径?