CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してカスタムカーソルを作成する方法

.cur（Internet Explorerの場合）、. gif、.png（Chrome、Firefox、Safariの場合）などの拡張子を持つカスタムカーソルイメージを作成し、CSSカーソルプロパティを使用して要素に適用し、URLに設定することができます。さらに、auto、default、pointerなどの一般的なカーソル値。

解決策

Selector {
   cursor: url("/*path to custom cursor file*/"), generic cursor;
}

例

例を使用してカスタムカーソルを作成する方法を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#tech1 {
   cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
   cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>

出力

上記のコードの出力は次のとおりです-

「DBMS」にカーソルを合わせる ボタン-

CSSを使用してカスタムカーソルを作成する方法

「Python」にカーソルを合わせる ボタン-

CSSを使用してカスタムカーソルを作成する方法


  1. CSSを使用してテキストを含むコメントボックスを作成する方法

    コメントボックスは、clip-pathプロパティを使用して作成できます 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector {    clip-path: /*value*/ } 例 次の例は、CSSを使用してコメントボックスを作成する方法を示しています。 <!DOCTYPE html> <html>    <head>       <style>          .cb {  

  2. CSSを使用してWebサイトのダーク/ライトモードを作成する方法

    ページのテキストの色と背景色を変更することで、Webサイトにダーク/ライトモードを追加できます。 構文 次の構文を使用して、ダークモードを適用できます。 Selector {    color: white;    background-color: black } 例 <!DOCTYPE html> <html>    <head>       <style>          div {