Javascript 带fadein的线位移
我有点执着于创造一种流行的弦乐。我想做的是,当用户将鼠标悬停在字符串旁边时,它旁边会出现一个条。像这样:Javascript 带fadein的线位移,javascript,css,Javascript,Css,我有点执着于创造一种流行的弦乐。我想做的是,当用户将鼠标悬停在字符串旁边时,它旁边会出现一个条。像这样: | string 但问题是,当出现|时,字符串向右移位,我该如何着手解决这个问题?这是我当前的CSS和Java代码 .details{ font-size: 2.1em; font-weight: bold; line-height: 5em; /*display:none;*/ } .line{ border-style:solid; b
| string
但问题是,当出现|
时,字符串向右移位,我该如何着手解决这个问题?这是我当前的CSS和Java代码
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
display: none;
margin-right: .4em;
}
JS:
$(文档).ready(函数(){
$('.details').mouseenter(函数(){
$('.line').remove();
$(this.prepend(“”);
美元(“.line”).fadeIn(250);
});
$('.details').mouseleave(函数(){
$('.line')。淡出(250);
});
});
假设每一行(.line和.details的父元素)都是相对定位的,请尝试以下操作
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
这将推送details元素10px,或者不管需要多少空间,同时阻止line元素在没有任何JavaScript的情况下推送details,你相信吗 啊,CSS3的力量
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
p::before {
content: '|';
position: absolute;
margin-left: -5px;
opacity: 0;
transition: opacity 250ms;
}
p:hover::before {
opacity: 1;
}