CSS: Thay đổi con trỏ trên background-image

Tôi có một hình nền như là một phần của một lớp cơ trong CSS:CSS: Thay đổi con trỏ trên background-image

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

Rồi sau này tôi có một hàm javascript đó sẽ thay đổi các lớp cơ thể.

Lý do tôi có hình ảnh ở chế độ nền là khi tập lệnh kích hoạt, màu nền và hình nền sẽ thay đổi chính xác cùng lúc và bạn không thể chọn hình ảnh.

Tôi có thể thay đổi loại con trỏ chỉ khi di chuột qua hình nền không? Tôi hiểu rằng tôi có thể đặt

cursor: pointer;

trong kiểu nội dung, nhưng điều này làm cho con trỏ xuất hiện trên toàn bộ trang.

Bạn có thể xem live page, currently, nơi nền thay đổi khi bạn nhấp vào bất kỳ đâu trên trang.

Chỉnh sửa: Tôi có một cái gì đó phù hợp với tôi ngay bây giờ. Tôi đã thêm một div trung tâm không có gì trong đó:

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

Điều này làm việc cho tôi vì tôi có thể đặt khu vực tùy ý của riêng mình, nhưng nếu có giải pháp tốt hơn, hãy cho tôi biết.

Nguồn

2013-02-12 paramesis

Tại sao không chỉ đặt hình nền trên div, căn giữa vào trang. Sau đó, bạn có thể thêm con trỏ trên div. – Leeish

Tôi có một cái gì đó như thế, nhưng với bảng [ở đây] (http://www.paramesis.com/index3.html) Vấn đề với điều đó là bạn có thể chọn hình ảnh và nếu bạn nhấp đủ nhanh, bạn có thể thấy mặt nạ của hình ảnh, trông không đẹp lắm. Điều đó quan trọng với tôi hơn là con trỏ, tôi chỉ muốn xem liệu tôi có thể có cả hai hay không. Cảm ơn, mặc dù – paramesis

Có thực sự không có lý do thuyết phục để làm cho hình ảnh một hình ảnh nền. Bạn sẽ được phục vụ tốt hơn bằng cách đặt hình ảnh trong hai hàm bao (bắt buộc để đảm bảo định tâm tuyệt đối theo chiều dọc và chiều ngang bất kể khung nhìn).

Bạn có thể mở rộng mảng bằng cách điền nó với các đối tượng, để nó có thể giữ các giá trị có thể cho hình ảnh và kiểu nội dung. Bằng cách này, bạn có thể sử dụng cùng một phương pháp (chu kỳ thông qua mảng) để chọn ra tất cả các thay đổi bạn muốn, ngay cả khi bạn muốn thêm các thay đổi khác sau này.

Ngoài ra, trong khi trình duyệt web khá khoan dung với các tiêu chuẩn, nó thực sự là tầm thường để phù hợp với các yêu cầu HTML 5 đơn giản và vẫn giữ chức năng.

Cuối cùng, tôi đặc biệt khuyến khích bạn tránh những gì tôi gọi là "mã hóa hipster". Mặc dù thật thú vị khi đặt tên cho các hàm, các biến, et al với tên ít người biết đến để làm hài lòng số ít kiểm tra mã nguồn, nó làm cho ngôn ngữ không cần thiết và khả năng bảo trì thấp hơn. Trong ngắn hạn, đó là một thực tế xấu, ngay cả khi bạn là người duy trì duy nhất.

Quan sát phiên bản nguồn mới của bạn dựa trên những nhận xét này (với dọn dẹp thụt lề) bên dưới.

<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. -->

Nguồn

2013-02-16 04:07:31 Tohuw

Đối với hậu thế, tôi đã đăng nguồn gốc (hiện tại) lên pastebin để bình luận của tôi có ý nghĩa hơn nếu thay đổi trang trực tiếp: http://pastebin.ca/2314337 – Tohuw

Điểm của bạn về mã hóa hipster được thực hiện tốt. – paramesis

Vấn đề tôi có với phương pháp này là màu nền và hình ảnh không thay đổi chính xác cùng lúc, do đó bạn sẽ thấy đường viền của png cho phần đó của giây. Như tôi đã đề cập trong một bình luận khác, điều này quan trọng hơn tôi nhiều so với con trỏ. Nó trở nên đáng chú ý hơn khi hình ảnh thứ hai chưa được tải, đó là lý do tại sao có một phong cách hình ảnh vô hình trước khi tải hình ảnh thứ hai đó. – paramesis

Hãy thử điều này

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

Nguồn

2013-02-12 22:12:27 Enve

Tôi đã thêm điều đó vào html. Dường như không hoạt động. Tôi cũng thử body.soon1.background-image: active và body.soon1: hover. không may mắn – paramesis

Những gì bạn có thể làm là, đặt cursor: pointer trên cơ thể và thay đổi con trỏ trên Childs. Làm somthing như thế này: 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; 
}

Nguồn

2013-02-12 23:44:51 Chanckjh

Hmm. Điều đó thực sự trái ngược hoàn toàn với những gì tôi đang cố gắng làm, nhưng thật tốt khi biết rằng bạn có thể làm điều đó. Cảm ơn! – paramesis

Something như thế này nên làm việc:

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

Một lựa chọn khác là sử dụng jQuery, mặc dù nó có thể là quá mức cần thiết cho việc này. Bất kể, đây là những gì nó sẽ như thế nào:

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

Kiểm tra nó ra ở đây: http://jsfiddle.net/K5fex/

Nguồn

2013-02-12 23:59:07 gvirav

CSS: Thay đổi con trỏ trên background-image

Trả lời

Các vấn đề liên quan