Question

我在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;
}

Answer 1

您想在悬停时将单个网格框的边框设置为红色吗？

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

以fiddle为例：

Answer 2

如果这仅用于视觉目的并且要突出显示整个列以及属于div的整行，那么CSS和pseudos可以在这里提供帮助

＆＃13;

//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);
});

＆＃13;

/* 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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何将div的网格中的一行悬停

2 个答案: