38 
<div><span>shanghai</span><span>male</span></div>

上記のような div の場合、マウスをオンにするとカーソル: ポインターになり、クリックすると a

javascript関数、その仕事をする方法は?

編集:マウスがオンのときにdivの背景色を変更する方法は?

もう一度編集:最初のスパンの幅を 120px にする方法は?Firefox では動作しないようです

4

9 に答える 9

65

「何か」のようなIDを付けて、次のようにします。

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

背景色の変更（更新された質問に従って）：

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
于 2009-06-29T09:44:07.057 に答える
30

<div style="cursor: pointer;" onclick="theFunction()">

動作する最も簡単なものです。

もちろん、最終的な解決策では、マークアップをスタイリング (css) および動作 (javascript) から分離する必要があります。この特定の問題を解決するだけでなく、一般的なマークアップ設計における優れた実践方法については、別のリストを参照してください。

于 2009-06-29T09:37:19.987 に答える
7

jQueryを使用することをお勧めします：

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
于 2009-06-29T10:09:10.690 に答える
5

clickbox という CSS クラスを使用し、jQuery で有効にすることをお勧めします。

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

あとは、div をクリック可能としてマークし、リンクを提供するだけです。

<div id="logo" class="clickbox"><a href="index.php"></a></div>

さらに、マウス カーソルを変更する CSS スタイル:

.clickbox {
    cursor: pointer;
}

簡単ですね。

于 2013-11-27T09:32:19.547 に答える
2

質問を更新したので、目立たない例を次に示します。

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
于 2009-06-29T09:55:29.110 に答える
2

onclick属性を追加する

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

カーソルを変更するには、css の cursor ruleを使用します。

div[onclick] {
  cursor: pointer;
}

セレクターは、IE の一部のバージョンでは機能しない属性セレクターを使用します。これらのバージョンをサポートしたい場合は、クラスを div に追加してください。

于 2009-06-29T09:35:00.587 に答える
2 
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

これにより、背景色も変更されます

于 2009-06-29T10:03:34.007 に答える
1

このdivが関数の場合は、style = "cursor：pointer"のようなスタイルでcursor：pointerを使用し、onclick関数を使用することをお勧めします。

このような

<div onclick="myfunction()" style="cursor:pointer"></div>

ただし、 jqueryやextjsなどのJSフレームワークを使用することをお勧めします

于 2009-06-29T09:41:04.100 に答える