如何悬停div网格的单行答案

【问题标题】：how to hover a single line of a grid of divs如何悬停div网格的单行
【发布时间】：2018-03-17 02:47:49
【问题描述】：

我用css和js做了一个网格

问题是我想悬停一行，但它需要整个网格

我想在鼠标触摸时悬停：或垂直线，或水平线，或两者都有，如果鼠标触摸它们

如果我使用.grid:hover div，它会占用整个网格

如果我使用.grid:hover，它只需要网格的边界框

我该怎么办？？

我认为更好的方法可能是 jquery，但我不知道如何将此函数附加到网格

JS：

//DOOM 3 UI Grid
$( document ).ready(function() {
  //prepare grid size
  function createGrid(size) {
    var ratioW = Math.floor($( document ).width()/size),
        ratioH = Math.floor($( document ).height()/size);
  //prepare container
    var parent = $('<div />', {
        class: 'grid',
        width: ratioW  * size,
        height: ratioH  * size
    }).addClass('grid').appendTo('html');
  //loop single lines
    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1,
                height: size - 1
            }).appendTo(parent);
        }
    }
  }
  //create grid
  createGrid(50);
});

CSS

/* grid */
.grid {
  border: 1px solid rgba(0,255,255,0.2);
  border-width: 1px 0 0 1px;
  position: absolute;
  top: 0;
  z-index: 0;
}
.grid div {
  border: 1px solid rgba(0,255,255,0.2);
  border-width: 0 1px 1px 0;
  float: left;
  z-index: 0;
}
.grid:hover div {
  border: 1px solid red;
  border-width: 0 1px 1px 0;
}

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： jquery css user-interface grid hover

【解决方案1】：

如果这只是为了视觉目的并且要突出显示属于 div 的整列和整行，那么 CSS 和伪在这里可以提供帮助

//DOOM 3 UI Grid
$( document ).ready(function() {
  //prepare grid size
  function createGrid(size) {
    var ratioW = Math.floor($( document ).width()/size),
        ratioH = Math.floor($( document ).height()/size);
  //prepare container
    var parent = $('<div />', {
        class: 'grid',
        width: ratioW  * size,
        height: ratioH  * size
    }).addClass('grid').appendTo('html');
  //loop single lines
    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1,
                height: size - 1
            }).appendTo(parent);
        }
    }
  }
  //create grid
  createGrid(50);
});

/* grid */
.grid {
  border: 1px solid rgba(0,255,255,0.2);
  border-width: 1px 0 0 1px;
  position: absolute;
  top: 0;
  z-index: 0;
  overflow:hidden;
}
.grid div {
  border: 1px solid rgba(0,255,255,0.2);
  border-width: 0 1px 1px 0;
  float: left;
  z-index: 0;
  position:relative;
}

.grid div:before,
.grid div:after {
  content:'';
  background:rgba(0,0,0,0.1);
  position:absolute;
  border:1px solid red;
  pointer-events:none;
  display:none;
}
.grid div:before {
  top:-1px;
  bottom:-1px;
  width:200vw;
  left:-100vw;
}
.grid div:after {
  left:-1px;
  right:-1px;
  height:200vw;
  top:-100vw;
}
.grid div:hover:before,
.grid div:hover:after {
  display:block;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您想让单个网格框的边框在悬停时变为红色？

.grid div:hover {
  border: 1px solid red;
}

以fiddle为例：

【讨论】：