CSS - 製作div可點擊...一些問題

-1

我有一個div，我想使其可點擊。這個div沒有任何內容，只是有一個表示按鈕狀態關閉的背景圖片。當用戶使用鼠標懸停div時，我希望按鈕更改爲狀態。當鼠標沒有懸停div時，我想讓按鈕返回關閉狀態。CSS - 製作div可點擊...一些問題

另一件事是這樣的：當用戶點擊時，我想讓按鈕在短時間內變爲ON，讓我們說0.2秒，然後返回OFF。然後必須遵循div的url。

問題，我面對現在：

當鼠標懸停在div的瀏覽器沒有顯示，表示該區域是可以點擊的手指;
當用戶點擊div將背景圖像更改爲ON（很好），但它保持ON，除非我刷新頁面。

這是我的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乾淨。

來源

2014-01-06 SpaceDog

看起來像點擊元素時會改變位置，那麼如何改變背景？ – adeneo

可點擊的元素應該是按鈕（除非它們導致導航，然後他們應該是錨點） –

嘗試這樣的事情在你的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：從：懸停和：活動刪除不必要的屬性。

來源

2014-01-06 20:34:41 mort

加'遊標：指針'太..！ –

對不對， – mort

PERFECT !!!!!!!!!!!你太棒了！ – SpaceDog

這將設置指針你想怎麼

#button1 { 
    cursor: pointer; 
}

來源

2014-01-06 20:34:39 CRABOLO

謝謝！我發現你的帖子前一秒鐘！ – SpaceDog

對於你的第一個問題：

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'); 


}

來源

2014-01-06 20:35:07

使用此上懸停cursor: hand; cursor: pointer;您的按鈕。並將onclick代碼放在單獨的JavaScript腳本中。

來源

2014-01-06 20:36:20 Peter

我嘗試過使用光標手，但它說的是無效的屬性值 – CRABOLO

我明白，它受IE的舊版本如ie5.x的支持，但由於我們不再關心這些，你可以忽略它......如果你仍然關心IE5.x，那麼把光標放在光標前：指針，它應該沒問題。 – Peter

首先，讓你的光標看起來像按鈕，指針，使用這個CSS：

cursor: pointer;

其次，對JavaScript從DIV移動到JavaScript，包括<script>...</script>標籤在你<head>或鏈接腳本文件通過<script src="mycode.js"></script>，其中mycode.js將包含您的代碼。

來源

2014-01-06 20:36:42

CSS - 製作div可點擊...一些問題

回答

相關問題