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