所以我試圖使影像成為隱藏鏈接。我將我的 topBar div 中的鏈接設定為看起來像帶有 CSS 的按鈕，當我試圖在我的 Header 中創建一個影像只是一個簡單的鏈接時，即使它在一個完全不同的 div 中，你也可以單擊它，它的樣式就像按鈕一樣標記并具有不同的 div 類。
HTML：
<!DOCTYPE html>
<html lang="en-US">
<head title="ScoopNoop">
<link rel="stylesheet" href="../css files/scoopnoop.css">
</head>
<body>
<div class="topBar">
<a href="#botBar">Jump to Bottom Bar</a>
<a href="page2.html" target="_self">Page 2</a>
<a href="https://www.google.com" target="_blank">Google</a>
<a href="https://www.colts.com" target="_blank">Colts</a>
</div>
<br>
<div class="header">
<a href="https://en.wikipedia.org/wiki/Easter_egg_(media)">
<img src="../images/derp.jpg" alt="Derp">
</a>
<h1>
ScoopNoop
</h1>
<img src="../images/derp.jpg" alt="Derp">
</div>
CSS：
/* All */
body {
background-color: skyblue;}
.body {
padding: 15px 15px;}
/* Bottom Bar */
.bottommBar {
float: left;
margin: 15px;}
.bottomBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;}
.bottomBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
/* Header */
div.header {
text-align: center;
margin: 3em;}
.header img {
max-width: 10%;
height: auto;
margin: 5px 5px;
display: inline-block;}
.header h1 {
margin: 5px 5px;
display: inline-block;}
/* Top Bar */
.topBar {
margin: 2em;}
.topBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;[enter image description here][1]}
.topBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
uj5u.com熱心網友回復：
代替
.topBar a:visited, a:active, a:link
和
.bottomBar a:visited, a:active, a:link
它應該是
.topBar a:visited, .topBar a:active, .topBar a:link
和
.bottomBar a:visited, .bottomBar a:active, .bottomBar a:link
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406166.html
標籤：