javascript – So erzielen Sie den Effekt, dass beim Bewegen der Maus ein roter Rand angezeigt wird
过去多啦不再A梦
过去多啦不再A梦 2017-07-05 11:04:45
0
8
1252

Wer hat diesen Effekt gemacht? Das habe ich mit border-right:1px solid #eee;border-bottom:1px solid #eee; geschrieben. Wenn die Maus schwebt, soll links auch ein pixelroter Rahmen vorhanden sein

过去多啦不再A梦
过去多啦不再A梦

Antworte allen(8)
淡淡烟草味

看起来好像每个项题主都只有右边跟下边?

我感觉改成每个项都有左边跟下边,hover的时候再通过设置相邻元素的左边颜色如何?

示例:

*{
    box-sizing:border-box;
}
.wrap{
    width:300px;
    
}
.item{
    width:75px;
    float:left;
    text-align:center;
    border:1px solid #eee;
    border-right-width:0;
}
.item:last-child{
    border-right-width:1px;
}

.item:hover{
    border-left-color:red;
    border-bottom-color:yellow;
}
.item:hover + .item{
    border-left:1px solid yellow;
}
.item:last-child:hover{
    border-right:1px solid yellow;
}
<p class="wrap">
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
</p>

http://runjs.cn/detail/ibxy9qab

仅有的幸福
ul li:hover{
  border: 1px solid #ed9639;
}
学习ing

box-shadow

学霸

是不是被左边的li挡住了的?最左边的有红边么?

習慣沉默

border-left不行吗?

扔个三星炸死你

是不是你的选择器 权值太小被覆盖了

过去多啦不再A梦

hover 的时候 要设置z-index。高于其它层级,这样你的边框才不会被覆盖

伊谢尔伦

感谢大家的回答,我已经找到解决办法,分享给大家
http://www.jb51.net/css/14548...

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage