导航:首页 > 万维百科 > 网页设计hover使用

网页设计hover使用

 发布时间：2021-01-11 01:39:08

1、网页设计怎么单独的设计多种a:hover？

因为css无法选择父元素，但是能选择兄弟元素，所以我们没必要那么死板，可以让方框和字体作为兄弟节点，让字体悬浮在方框上就行了。想要单独给某个a设置hover，可以直接利用该a的id，或者用父元素的后代选择器nth-child()，不过不推荐

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title>icon</title>

<style type="text/css">

a {

text-decoration: none;

}


#box {

width: 306px;

height:306px;

position: relative;

overflow: hidden;

} 

#icon{

width: 300px;

height: 300px;

position: absolute;

border: 1px solid black;

}

#icon:hover{

border: 3px solid red;

}

#icon img{

width: 200px;

height: 200px;

border: 1px solid orange;

border-radius: 100px;

margin-left:50px;

margin-top: 20px;

}

#txt{

width: 300px;

display: block;

position: absolute;

bottom: 5px;

text-align: center;

cursor: pointer;

z-index: 100;

}

#txt:hover{

color: green;

}

#txt:hover + #icon{

border: 3px solid green;

}

</style>


</head>


<body>


<div id="box">

<a id="txt">请放进来</a>

<a id="icon"><img src=""/></a>

</div>


</body>


</html>

2、hover在网页设计中代码的意思是什么？

hover是用在网页中产生动态效果的，比如说你把鼠标移到有hover事件的区块上那么那个那个区块就会根据你自己改变的颜色而变色；说简单点就是把鼠标一上去就马上变为另一种颜色。

3、网页设计中的动态脸接中a:link a:visited a:hover a:active四种状态的含义是什么?

a:link 是指超链接正常的时候的状态
a:visited 是超链接被点击以后的状态
a:hover 是超链接鼠标经过状态
a:active 是超链接激活状态

呵呵~~希望帮到您

4、网页制作时，鼠标经过图片的三种状态，第三种是怎么实现，用什么代码？

鼠标进过的四种状态，写法全部一样：
：link 点击前的状态
：hover 鼠标移上去时的状态
：active 鼠标点击到松开之间的状态
：visited 鼠标点击后的状态

5、网页设计中，怎样制作出链接的内容鼠标滑过就会动的那种效果

|你是说文字下陷那种效果？
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---超链接陷下效果</title>
</head>

<body>

<style>
A:link,A:visited ,A:active {TEXT-DECORATION: none}
A:hover {text-decoration : none; position : relative; top : 1px; left : 1px}
</style>

<A HREF="http://linkweb.cn/js">来来，都到这里来……</A>

</body>

</html>

6、html css 网页设计 a:link ,a:visited,a:hover, 怎么 添加行内样式

a:link，a:visited，a:hover，貌似不可以用行内样式表示哦。

可以用内部样式：

<style>
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}
</style>

也可以用css文件中的外部样式：

<link rel="stylesheet" type="text/css" href="test.css"></link>
test.css文件里：
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}

但是貌似不可以用行内样式的。

如果一定要用，可以这样的方式来：

<a href="javascript:void(0);" onmouseover="this.style.color='yellow';" onmouseout="this.style.color='blue';" onclick="this.style.color='red';">链接</a>

其中，onmouseout对应的a:link，onclick对应的a:visited，onmouseover对应的a:hover

7、网页设计 hover在哪些标签起作用，除了<a>中会起作用，在一般的p ,div 会起作用吗

主流浏览器中的元素几乎都支持伪类。【除了<br/>和一些引用元素之类的】
IE6不支持:hover，所以还是用js实现好点。

8、网页设计中 鼠标点击效果实现

<style> 
.black{color:black;font-weight:bold;}
a{color:blue;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>//载入JQ库 
<script>  
$("a").click(function(){
$("a").attr("href","#").removeClass("black");
$(this).removeAttr("href").addClass("black");
});</script>  
<a class="black">新闻</a> <a href="#" class="">网页</a> <a href="#" class="">知道</a> <a href="#" class="">百科</a>

9、网页设计中在table中怎么写a:hover的效果~~~

在Table里加个ID，然后，这个ID上写a:hover，这样兼容性好一些。

或者写一个类，在表格的内容需要实现这个效果的地方调用这个类

与网页设计hover使用相关的知识