導航:首頁 > 萬維百科 > 網頁設計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使用相關的知識