下面的代码可以实现：当你鼠标移动到第一个字符串的时候，出现一个红色的框。当你鼠标移动到红色的框的时候，红色框内部的文字格式继续变动。实现了联动。
<html>
<head>
<style>
.FontStyle{float:left;}
.FontStyle:hover+.wrap,.wrap:hover{border:1px solid red;}
.wrap{float:left;border:1px solid white;}
.wrap:hover span{display:block;margin-right:10px;}
.wrap span{display:none;float:left;}
.FontStyle:hover+.wrap span{display:block}
</style>
</head>
<body>
<div class="FontStyle">hello world! </div>
<div class="wrap">
<span class="label label-primary bstreeadd">添加</span>
<span class="label label-primary bstreeedit">修改</span>
<span class="label label-danger bstreedel">删除</span>
</div>
<div class="FontStyle">End</div>
</body>
</html>
下面的代码，出现一个删除按钮，移动到删除按钮变手形：
<html>
<head>
<style>
.FontStyle{float:left;}
.wrap{float:left;}
.wrap:hover svg{display:block;cursor:pointer}
.wrap svg{display:none;float:left;width:16px;height:20px}
.FontStyle:hover+.wrap svg{display:block}
</style>
</head>
<body>
<div class="FontStyle">hello world! </div>
<div class="wrap">
<svg viewBox = "0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="3" y1="3" x2="13" y2="13" style="stroke: rgb(234,41,49); stroke-width: 3" />
<line x1="13" y1="3" x2="3" y2="13" style="stroke: rgb(234,41,49); stroke-width: 3" />
</svg>
</div>
<div class="FontStyle">End</div>
</body>
</html>
网友评论