[英]CSS - making a div clickable… some problems
我有一個要使其可點擊的div。 該div內部沒有任何內容，但是具有表示按鈕狀態為關閉的背景圖像。 當用戶使用鼠標懸停div時，我希望按鈕更改為on狀態。 當鼠標沒有懸停在div上時，我希望按鈕返回到關閉狀態。
另一件事是：當用戶單擊時，我希望按鈕在短時間內變為“打開”狀態，例如說0.2秒，然后返回“關閉”狀態。 然后必須遵循div的url。
我現在面臨的問題：
這是我的div
<div id="button1" onclick="location.href='http://www.mysite.com';this.id='button1_on';return false;"> </div>
這是CSS
#button1 {
position:absolute;
left:159px;
top:466px;
width:119px;
height:120px;
background-image:url('images/buttonOFF.jpg');
background-repeat:no;
background-position: left top;
}
#button1_on {
position:absolute;
left:159px;
top:466px;
width:119px;
height:120px;
background-image:url('images/buttonON.jpg');
background-repeat:no;
background-position: left top;
}
短時間后如何使圖像返回OFF，懸停時將其更改為ON，並強制瀏覽器顯示手指...
另一個好奇心同樣的問題：有沒有一種方法可以在不使用div內部所有代碼的情況下實現？ 我寧願讓div保持干凈。
這將設置您想要的指針
#button1 {
cursor: pointer;
}
在CSS中嘗試以下操作：
#button1 {
position:absolute;
left:159px;
top:466px;
width:119px;
height:120px;
background-image:url('images/buttonOFF.jpg');
background-repeat:no;
background-position: left top;
}
#button1:hover,
#button1:active {
background-image:url('images/buttonON.jpg');
cursor:pointer;
}
並且不要使用JavaScript更改ID。
編輯：另外，有沒有您不簡單使用標簽的原因？ 這些功能甚至可以在沒有JS的瀏覽器中使用，並且您知道..它們的設計目的完全是為了吸引人們點擊其他站點。
編輯2：從：hover和：active刪除不必要的屬性。
對於第一個問題：
When the mouse hovers the div the browser did not show the finger that denotes that the region is clickable;
使用cursor:pointer
#button1:hover {
cursor:pointer
}
對於第二個問題，請添加：
#button1:active {
background-image:url('images/buttonON.jpg');
}
在懸停cursor: hand; cursor: pointer;的按鈕上使用此按鈕cursor: hand; cursor: pointer; cursor: hand; cursor: pointer; 。 並將onclick代碼放在單獨的javascript腳本中。
首先，要使光標看起來像按鈕指針，請使用以下CSS：
cursor: pointer;
其次，要將JavaScript從DIV移到JavaScript，請在<head>包含<script>...</script>標記，或通過<script src="mycode.js"></script>鏈接腳本文件。 ，其中mycode.js將包含您的代碼。
使一個div可點擊和一個JavaScript以運行一些不同的鏈接
[英]Making a div clickable and a javascript to run some different link
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.