[已解决]有偿！！！HTML中画个圆，并在其中插入图片，鼠标悬停此处，圆外边框变色

闻思不懂 · 发表于 2017-9-1 17:06:31

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

详细见图：

有偿啊兄弟们

最佳答案

月排行榜 / 总排行榜

不二如是

2017-9-18 23:02:56

在实现你需求基础上，稍微送你几个福利

代码包：

Ex4-鼠标悬停特效.zip (18.4 KB, 下载次数: 2)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用特效</title>
<style>
* {
        margin:0;
        padding:0;
        list-style:none;
}

.fishc {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        background: no-repeat url("images/shenshou.png") left top;
        -webkit-background-size: 220px 220px;
        -moz-background-size: 220px 220px;
        background-size: 220px 220px;
        -webkit-border-radius: 110px;
        border-radius: 110px;
        -webkit-transition: -webkit-transform 2s ease-out;
        -moz-transition: -moz-transform 2s ease-out;
        -o-transition: -o-transform 2s ease-out;
        -ms-transition: -ms-transform 2s ease-out;

        border:5px solid blue;
        border-radius：50%;
}




.fishc:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);


        border:5px solid red;
}
</style>
</head>
<body>
<div class="fishc"></div>
</body>
</html>

跳转到最佳答案楼层

alltolove · 发表于 2017-9-1 18:53:40

这直接用css就能搞定啊

sphacker · 发表于 2017-9-1 22:37:44

border:2px solid red;
border-radius：50%;
E:hover {
border:2px solid pink;
}

hiwch · 发表于 2017-9-14 10:47:57

css:hover应该可以的查找一下css的伪类

不二如是 · 发表于 2017-9-18 23:02:56

在实现你需求基础上，稍微送你几个福利

代码包：

Ex4-鼠标悬停特效.zip (18.4 KB, 下载次数: 2)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用特效</title>
<style>
* {
        margin:0;
        padding:0;
        list-style:none;
}

.fishc {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        background: no-repeat url("images/shenshou.png") left top;
        -webkit-background-size: 220px 220px;
        -moz-background-size: 220px 220px;
        background-size: 220px 220px;
        -webkit-border-radius: 110px;
        border-radius: 110px;
        -webkit-transition: -webkit-transform 2s ease-out;
        -moz-transition: -moz-transform 2s ease-out;
        -o-transition: -o-transform 2s ease-out;
        -ms-transition: -ms-transform 2s ease-out;

        border:5px solid blue;
        border-radius：50%;
}




.fishc:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);


        border:5px solid red;
}
</style>
</head>
<body>
<div class="fishc"></div>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册