Question

在此示例中，我在悬停时添加了插入边框过渡。但是，当边框出现时，它似乎将div向下推到右边。有没有解决的办法？也许有一种更好的方式来获得一种“发光”＃34;影响整个div本身？

我已尝试将元素设置为固定元素，但这并没有帮助解决问题。

此处的任何帮助表示赞赏。代码和JS小提琴如下：

CSS：

body {
    height:97.54%;
    width:98.8%;
    background-color:#0C0C0B;
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    margin:0;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
}
.outline {
    transition:all .4s ease-out;
}
.outline:hover {
    border:4px inset white;
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='stylesheet2.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,700' rel='stylesheet' type='text/css'>
    <title>CDC</title>
  </head>
  <body>
    <div id='nw' class='outline'>
      <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
      <p class='titletext'>News</p>
    </div>
    <div id='sw'>
      <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
      <p class='titletext'>Events</p>
    </div>
  </body>
</html>

Answer 1

将box-sizing: border-box;添加到#nw

JSFiddle - DEMO

#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

OR：您可以将border-width: 4px;和border-style: solid;添加到#nw

JSFiddle - DEMO

#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
    border-width: 4px;
    border-style: solid;
}

Answer 2

您的代码存在的问题是您在悬停时添加了边框。的 JsFiddle Demo

所以，我在这里改变了你的CSS

.outline { transition:border .4s ease-out; border:4px solid #0C0C0B; } .outline:hover { border-color:white; }

我制作了一个带有边框的div，其颜色与背景颜色相同，只有当它悬停时才会变成白色。 此解决方案不会在停留时移动您的div内容

Answer 3

使用outline:代替border:

.outline:hover {
    outline: 4px inset white;
}

jsfiddle

边界增加会在悬停过渡时移动div

3 个答案: