Question

我一直在努力想出一个解决我遇到的问题的解决方案。我有一个大小相等的网格，横跨7和4，并根据屏幕分辨率调整大小。我的每行代码看起来像这样（虽然我已经尝试了纯图像格式，但没有任何背景属性）

<!--1st Row-->
<div style="background-color:black; overflow:auto; height:auto;">
<img src="images/restalksquare.jpg" style="width:14.27%; display:inline;" id="after" class="sizing">
<img src="images/C2,-R1.jpg" style="width:14.27%; display:inline;" class="dark boxes sizing">
<img src="images/C3,-R1.jpg" style="width:14.27%; display:inline;" class="dark boxes sizing">
<img src="images/C4,-R1.jpg" style="width:14.27%; display:inline; position:static; z-index:101;" class="boxes dark hover sizing">
<img src="images/empty.jpg" style="width:14.27%; display:inline;" class="sizing">
<img src="images/C6,-R1.jpg" style="width:14.27%; display:inline;" class="hover sizing topright">
<img src="images/C7,-R1.jpg" style="width:14.27%; display:inline;" class="hover sizing topright">

网格应该具有约4-5 px纯白色的边框;滚动时某个类中的正方形变得更暗。我已经尝试了不同的解决方案，但我使用的主要方法之一是我将包含div设置为背景颜色的方法：黑色＆＃39;然后使用JQuery方法：

$(document).ready(function(){
$(".dark").mouseenter(function(){
    $(".dark").fadeTo(0, 0.5);})
 ;});

$(document).ready(function(){
$(".dark").mouseleave(function(){
    $(".dark").fadeTo(0.5, 1);
});});

这种方法正在使方块变暗;但客户也需要这些部分内的边界（不是没有变暗的边界）保持不变;并且图像之间存在相同的空间。然而，我使用的蛾方法要么移动整个屏幕，要么在不透明度降低时用暗色调填充div内的一半空间;但我希望两边的完整边框空间保持完全不透明。

.hover2{
outline: 0px !important;
}
.hover{
outline:3px solid white;
outline-offset:-3px;
}

.hover类在悬停之前设置为某个div;而.hover2类＆＃34;出现＆＃34;悬停时，导致（整个）轮廓消失，当我需要在一侧保留轮廓以保持框之间的空白比率时。

当你将鼠标快速移动到我喜欢弄清楚的文字上时，也会有轻微的闪烁;这样做.dark保持低不透明度，并且在进入文本区域时也没有边框，并应用淡入淡出效果方法，尽管它是同一个类，但它仍然以完全不透明的方式出现。

我也试过边境＆＃39;和＆＃39; box-shadow＆＃39;属性无济于事。

这是网站：http://residentalk.com/

非常感谢任何帮助！

需要在悬停时保留边框宽度而不移动元素

0 个答案: