![When When](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了边框增加在悬停过渡时移动 div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这个例子中,我在悬停时添加了一个插入边框过渡.但是,当边框出现时,它似乎将div向下推到了右侧.有没有解决的办法?也许有更好的方法可以在整个 div 本身周围获得发光"效果?
我尝试将元素设置为固定,但这并没有帮助解决问题.
感谢这里的任何帮助.代码和 JS 小提琴如下:
JS 小提琴: http://jsfiddle.net/w3kn1tun/
CSS:
body {高度:97.54%;宽度:98.8%;背景色:#0C0C0B;}#nw {背景图像:网址('克利夫兰之夜.jpg');位置:绝对;高度:50%;宽度:49%;背景尺寸:封面;边框半径:10px;}#ne {背景图片:网址('news2.jpg');位置:绝对;背景尺寸:封面;高度:50%;宽度:49.4%;左:50%;边框半径:10px;}#sw {背景图片:网址('drinks1.jpg');位置:绝对;背景尺寸:封面;高度:46.5%;宽度:49%;顶部:52.15%;边框半径:10px;}#se {背景图片:网址('克利夫兰日.jpg');位置:绝对;背景尺寸:封面;高度:46.5%;宽度:49.4%;左:50%;顶部:52.15%;边框半径:10px;}.titletext {文字对齐:居中;保证金:0;font-family: 'Open Sans Condensed', sans-serif;字体粗细:100;白颜色;空白:nowrap;字体大小:200%;}.大纲 {过渡:所有 .4s 缓出;}.outline:悬停{边框:4px 内嵌白色;}
HTML:
<头><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><身体><div id='nw' class='outline'><p class='titletext'>夜生活</p>
<div id='ne'><p class='titletext'>新闻</p>
<div id='sw'><p class='titletext'>食物&喝</p>
<div id='se'><p class='titletext'>事件</p>
</html>
解决方案
您的代码的问题是您在鼠标悬停时添加了边框.JsFiddle 演示
所以,这里我已经改变了你的 CSS 如下
.outline {过渡:边界 .4s 缓出;边框:4px 实心 #0C0C0B;}.outline:悬停{边框颜色:白色;}
我制作了一个边框颜色与背景颜色相同的 div,并且仅在悬停时将其更改为白色.此解决方案在悬停时不会移动您的 div 内容
In this example, I've added an inset border transition on hover. However, when the border appears, it seems to push the div down to the right. Is there a way around this? Maybe there is a better way to get a "glow" effect around the entire div itself?
I've tried setting elements as fixed, but that didn't help solve the problem.
Any help here is appreciated. Code and JS Fiddle below:
JS Fiddle: http://jsfiddle.net/w3kn1tun/
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>
解决方案
The problem with your code was that you were adding a border when it was hovered. JsFiddle Demo
So, here I've changed your CSS as follows
.outline {
transition:border .4s ease-out;
border:4px solid #0C0C0B;
}
.outline:hover {
border-color:white;
}
I made a div with a border with colour same as that of the background colour, and changed that to white only when it is hovered. This solution wont move your div contents while hovered
这篇关于边框增加在悬停过渡时移动 div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!