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

网页设计的hover怎么使用

 发布时间：2020-11-02 03:33:29

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、网页设计中在table中怎么写a:hover的效果~~~

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

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

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

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

4、网页设计中的.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>

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

把要做特效的内容放到一个<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都能够得到想要的效果了。

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、网页制作CSS+DIV如何控制文字背景效果问题？

给相册分页的相册a标签设置一个class类为current,
.current , a:hover { color:red;background:url(地址)};

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