CSS：更改光標移到背景圖像

我有一個背景圖像在CSS一類的身體的一部分：CSS：更改光標移到背景圖像

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
}

然後後來我有一個JavaScript函數，將變身類。

我在背景中顯示圖像的原因是，當腳本激活時，背景顏色和背景圖像將同時發生更改，並且無法選擇圖像。

是否有可能我只能在懸停在背景圖像上時更改光標類型？我明白我可以把

cursor: pointer;

在身體樣式，但這使得光標出現在整個頁面。

您可以查看live page, currently,，當您單擊頁面上的任意位置時，背景會發生變化。

編輯：我現在有些東西適合我。我說什麼也沒有居中DIV它：

div.clickme { 
width:300px; 
height:400px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-150px 0 0 -200px; 
cursor: pointer; 
}

這對我的作品，因爲我可以把我自己的任意區域，但如果任何人有一個更好的解決方案，讓我知道。

來源

2013-02-12 paramesis

爲什麼不把背景圖像放在div上，居中顯示在頁面上。然後你可以在div上添加遊標。 – Leeish 2013-02-12 22:12:31

我有類似的東西，但是用表[這裏]（http://www.paramesis.com/index3.html）問題是你可以選擇圖像，如果你點擊的速度夠快，你可以看到形象的面具，兩者都不太好看。這對我來說比光標更重要，我只是想看看我能不能兼得。謝謝，雖然 – paramesis 2013-02-12 22:57:00

確實沒有令人信服的理由，以使圖像的背景圖像。通過將圖像放在兩個包裝中（不管視口如何，要求保證垂直和水平方向的絕對中心），您的服務會更好。

您可以通過填充對象來擴展數組，以便它可以保存圖像和主體樣式的可能值。這樣，即使您想稍後添加其他更改，也可以使用相同的方法（遍歷數組）循環選擇所需的所有更改。另外，雖然網絡瀏覽器對標準相當寬鬆，但符合簡單的HTML 5要求並且仍然保持功能的確很簡單。

最後，我強烈建議您避免所謂的「時髦編碼」。雖然命名函數，變量，等帶有隱晦的名字很有趣，但它可以使少數檢查源代碼感到滿意，但它會造成不必要的笨語言和較低的可維護性。總之，即使你是唯一的維護者，這也是一種不好的做法。

根據以下注釋（使用縮進清理）觀察源代碼的新版本。

<html> 
<head> 
    <title>Something Amazing Will Happen</title> 
    <style type="text/css"> 
     body.light { 
      background-color: white; 
     } 
     body.dark { 
      background-color: black; 
     } 
     div.outside-wrapper { 
      position: absolute; 
      top: 50%; 
      width: 100%; 
      height: 1px; 
      overflow: visible; 
     } 
     div.inside-wrapper { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 381px; 
      height: 393px; 
      margin: -197px 0 0 -191px; 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     styleIndex = 0; 
     var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}]; 
     function nextStyle() { 
      if (++styleIndex >= states.length) 
       styleIndex = 0; 
      var state = states[styleIndex]; 
      document.body.className = state.style; 
      document.getElementById("clickme").src = state.image; 
     } 
     var tap = true; 
     document.addEventListener('touchstart',function(e) { 
      tap = true; 
     }); 
     document.addEventListener('click',function(e) { 
      nextStyle() 
      tap = false; 
     }); 
     document.addEventListener('touchmove',function(e) { 
      tap = false; 
     }); 
     document.addEventListener('touchend',function(e) { 
      if(tap) 
       nextStyle(); 
     }); 
    </script> 
</head> 
<body class="light"> 
    <div class="outside-wrapper"> 
     <div class="inside-wrapper"> 
     <img src="soon1a.png" id="clickme"> 
     </div> 
    </div> 
</body> 
</html> 
<!-- Don't ask me what it is. -->

來源

2013-02-16 04:07:31 Tohuw

對於後人，我已經將原始（當前）源文件發佈到了pastebin，所以如果活動頁面發生更改，我的評論就會更有意義：http://pastebin.ca/2314337 – Tohuw 2013-02-16 04:46:58

您對時髦編碼的觀點很好。 – paramesis 2013-02-19 03:25:17

我用這種方法得到的問題是，背景顏色和圖像不會完全同時更改，以便您可以看到png的大致輪廓。正如我在另一評論中提到的，這對我來說比光標更重要。當第二張圖片尚未加載時，它變得更加明顯，這就是爲什麼有一個不可見的圖像樣式預加載第二張圖片。 – paramesis 2013-02-19 03:35:20

試試這個

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
} 
body.soon1:active{ 
    cursor: pointer; 
}

來源

2013-02-12 22:12:27 Enve

我已經添加到HTML。似乎沒有工作。我也試過body.soon1.background-image：active和body.soon1：懸停。沒有運氣 – paramesis 2013-02-12 22:50:47

你可以做的是，把cursor: pointer的身體和改變光標上孩子的。做財產以後這樣的：http://jsfiddle.net/HSdH3/

HTML：

<body> 
    <div></div> 
</body>

CSS：

body { 
    background: red; 
    width:100%; 
    height: 100%; 
} 
body:hover { 
    cursor: pointer; 
} 
div { 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
    background: white; 
} 
div:hover { 
    cursor: auto; 
}

來源

2013-02-12 23:44:51 Chanckjh

嗯。這實際上與我想要做的完全相反，但很高興知道你可以做到這一點。謝謝！ – paramesis 2013-02-13 00:23:27

像這樣的東西應該工作：

<div id="myDiv" style="cursor: pointer">

另一種選擇是使用jQuery，雖然這可能是矯枉過正。無論如何，這裏是它會是什麼樣子：

$(document).ready(function(){ 
    $("#myDiv").hover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
});

看看這裏：http://jsfiddle.net/K5fex/

來源

2013-02-12 23:59:07 gvirav

CSS：更改光標移到背景圖像

回答

相關問題