如何盘旋的div

网格的单行我做在CSS网格和js如何盘旋的div

的问题是，我想鼠标悬停在一个单一的线，但它需要整个网格

我会喜欢将鼠标悬停在与鼠标触摸：或垂直线，或水平线，或既如果鼠标触摸它们

如果我使用.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; 
}

来源

2017-10-05 Heavybrush

问题寻求帮助的代码必须包括必要的重现它最短的代码**的问题本身**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

如果这仅仅是视觉的目的和要突出整列和整行，其中所属的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; 
 
}

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

来源

2017-10-05 14:21:40

谢谢！这真的有很大帮助 – Heavybrush

你想使单个网格框的边框在悬停时呈红色？

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

发了fiddle为例：

来源

2017-10-05 13:33:25 SteinB

如何盘旋的div

回答

相关问题