Javascript 仅将一些组合的DIV框悬停在一行中

我有一个盒子集，它由两个引导列组成，每个引导列在一个4列容器中形成一个盒子

图1 文本1 图2 文本2

---

我想问题是您在full.row上应用了：：hover

如果我了解您想要什么，一个简单的解决方法是使用一个专用类将每个对分组到一个div中，并在这个类上应用：：hover：

html

图1 文本1 图2 文本2 在css中

.行.框：悬停{ 背景色：d3ecfb； } _编辑1_ 已删除编辑，因为它是完全错误的

_编辑2_

这是js中的一个变通方法抱歉我不是jQuery用户

它将每个框左分组，下一个同级框右分组，并将它们插入父框中插入的类框的div中。。。 不是最干净的方式，但它可以工作：

document.queryselectoral.box left.forEachelement=>{ var sibling=element.nextElementSibling； 如果sibling.classList.containsbox-right{ var parent=element.parentNode； var-box=parent.appendChild document.createElementdiv ; box.appendChildelement； box.1子兄弟姐妹； box.classList.addbox； } } 现在是css

.box:悬停{ 背景色：2980b9； }

---

我们可以用第n种方法选择两个孩子 检查这个

好的，找到了一个解决方案。也许不是最优雅的方式，但对于所有感兴趣和/或有类似问题的人来说，以下jquery就可以做到这一点：

$function{ $.box-left.hover//如果任何左侧部分溢出，则仅更改此+下一步 作用{ $this.css'background-color'，'d3ecfb'； $this.next.css'background-color'，'d3ecfb'； }, 作用{ $this.css'background-color'，'eee'； $this.next.css'background-color'，'eee'； } ; $.box-right.hover//如果任何右侧部分溢出，则仅更改此+上一个 作用{ $this.css'background-color'，'d3ecfb'； $this.prev.css'background-color'，'d3ecfb'； }, 作用{ $this.css'background-color'，'eee'； $this.prev.css'background-color'，'eee'； } ;

---

};当左框悬停时，右框可以单独使用CSS进行更改，但另一个方向在技术上不可能以同样的方式进行。在某些情况下，使用相当复杂的变通方法可以实现视觉效果。当然，在一行中只放一个左右框，而不是四个框，可以很容易地解决您的问题，您为什么不这样做呢？好的，.row来自引导设置。使用新行将导致新行，这是不需要的。另外，在行和列之间放置另一个div的可能性也不起作用。在它后面已经有一个css，在这种情况下不再正常工作…啊，你仍然希望它们彼此相邻，好的。这将证明一行有两列，其中包含一行，每行有两列。您只需在悬停内部行的基础上应用悬停格式即可。“在它的背后已经有一个css在这种情况下不再正常工作了…”-这不是一个结构上的巨大变化，它也应该在css中引起大量的重写…可能通过相应地修改一些选择器来完成。但这一切都取决于具体情况。结尾处的错误语法冒号。行：没有意义，甚至一开始就没有被问到什么。好的，在没有很好理解的情况下尝试了ist-但只有第一个框的左或右部分悬停？！。。。是的，这是显而易见的，上面已经推荐了。然而，已经有一个大型数据库，其中存储了许多这样的页面，如果可能的话，应该在不进行转换的情况下将其传输到新项目中。使用此解决方案，我必须编写一个转换器或手动更改所有内容：……此外，许多调整后的css在框的定位方面不再正常工作；好的，这是个小问题。我的希望是js/jquery中的一个解决方案……你说你不能更改html？这确实改变了游戏规则。很抱歉，我没有明白。好的，只插入一个新的DIV级别将是一个痛苦的a。。。通过SQLReplace可以很容易地向col添加一个新类-但是：尝试这个解决方案，只有组合框的左侧或右侧部分悬停，而不是整个框？！？？ok Gui3-首先感谢您的努力！但是，这种注入额外DIV的解决方案会像我在代码中直接进行引导设置一样扰乱引导设置。此外，新DIV框的背景将悬停，而不是框本身的两部分。。。顺便说一句-代码笔的链接与下面来自mohammed的链接相同？？？我没有看到你的解决方案。。。

 .col-md-3:nth-child(-n + 2):hover {
  background-color: #2980b9;
  }