导航:首页 > 万维百科 > 网页设计hover标签

网页设计hover标签

 发布时间：2021-01-05 03:08:46

1、网页设计中的.top ul li:hover a表示什么意思 求指教

表示定义一个按照元素层级关系限定的CSS样式。

即：要求元素的层级关系，首先是最外层元素要包含.top样式，其次再去寻找下面ul元素，再找到ul下面的li，再找到li下面的a标签元素。


上面这个样式的意思是当鼠标移动到li元素上时，它下面的a标签将会按照这个样式进行渲染。


<div class="top">
    <ul>
        <li>
            <a href="#">链接</a>
        </li>
    </ul>
</div>

 样式的这种定义方式只对满足上述结构的元素生效，像如下结构的代码，将不会拥有上述定义的样式：

<div class="top">
    <a href="#">链接</a>
    <ul>
        <li>
        </li>
    </ul>
</div>

2、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

3、[网页设计]给图片img 标签加上鼠标经过效果

直接复制下来就能用了:

<HTML><head>
<script>
function ms_event(sef){
location.href = "#hi";
}
function go_click(sef){
window.open(sef.href);
}
</script>
</head>
<body>

当鼠标移到文字或者图片上面便会自动点击上面的链接:
<a href="http://www.baidu.com" onmouseover="go_click(this)"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<p> </p>

<div id="hi">当鼠标移动到最下面的图片或者文字上时,就会定位到这里</div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<a href="http://www.baidu.com" onmouseover="ms_event(this);">还有一个就是当鼠标移动到某个图片或者文字上时，鼠标自动跳到页面的其他位置上<a>

</body>
</HTML>

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

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

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

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

6、网页制作 当鼠标经过文字后字体会变大！在哪里写代码代码是什么！！

把要做特效的内容放到一个<a></a>标签里面，然后给它设置一个css样式：
a:hover{font-size:你想要的字体大小;}。
如果不想出现链接效果的话，可以把内容放到<span></span>标签，然后用span:hover{font-size:你想要的大小;}也行。这两种方法在IE7，8和Firefox上都可行。

如果要兼容杯具或者说餐具的IE6的话，只能用以下方法。
<a href="#" id="linkHover">你想出现效果的内容</a>
为了使得这个超链接表现得像普通文本内容，给这个超链接建立个样式如下：
a {color:Black; text-decoration:none;cursor:default;}
a.hover, a:hover { font-size:你想要的字体大小; }

之后再用一段JS给它动态增加css样式：
<script type="text/javascript">
<!--[if IE 6]>
document.getElementById('linkHover').onmouseover = function() {
this.className = "hover";
};
document.getElementById('linkHover').onmouseout = function() {
this.className = "";
}
<![endif]-->
</script>

至此，无论是Firefox，IE7，8还是杯具的IE6都能够得到想要的效果了。

7、DW制作网页导航栏如何设置鼠标经过时背景颜色会改变？

使用伪类 :hover{background-color:#f00;}
例如你要给一个div 标签设置鼠标悬浮上去改变背景，
css样式：
.box{background-color:#0f0;} //设置div的背景颜色
.box:hover{background-color:#f00;} //设置鼠标悬浮上去时的背景意思
html内容：
<div class="box">鼠标悬浮改变背景</div>

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

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

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

9、请教网页制作高手：为什么我的a:link a:hover在本地有效果，传到服务器上就没效果了

一般是css书写不规范

10、网页设计怎么单独的设计多种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>

与网页设计hover标签相关的知识