comment le vol stationnaire sur une seule ligne d'une grille de divs

Question

J'ai fait une grille dans css et js

le problème est que je veux planer une seule ligne, mais il faut toute la grille

Je voudrais souhaite planer sur contact avec la souris: ou des lignes verticales, ou des lignes horizontales, ou les deux si la souris les toucher

si j'utilise .grid:hover div il prend toute la grille

si j'utilise .grid:hover il ne prend que la délimitation boîte de la grille

comment puis-je faire ??

Je pense que la meilleure façon pourrait être par jquery, mais je ne sais pas comment ajouter cette fonction à la grille

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

Si cela est uniquement à des fins visuel et sur le point de mettre en évidence toute la colonne et la ligne entière où appartient la div, puis CSS et pseudos peuvent aider ici

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

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

Answer 2

Vous voulez faire en rouge les bordures d'une seule case de grille?

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

Fait un fiddle comme exemple: