Question

如何在鼠标输入上执行某些操作？喜欢在下面的代码中显示。

for(x=1; isset($_COOKIE["link$x"]); $x++)
    echo <div id="'.$x.'" OnMouseEnter="myfunction('.$x.')">
}

然后在javascript中

function myfunction(which){
    // doing stuff on id with "which"
}

Answer 1

onmouseenter特定于IE，因此请使用onmouseover：

myElement.onmouseover = function()
{
    document.getElementById(which).style.backgroundColor = 'red';
}

是的，它就像那样简单......通知我将red更改为'red'，因为我认为你没有定义红色。这是怎么回事在Javascript中执行此操作，虽然使用:hover在CSS中执行此操作会更简单，但是您要求使用Javascript。

Answer 2

如果您只想在鼠标悬停时应用样式，则不需要JavaScript。 CSS :hover伪选择器应该可以正常工作：

#elementId {
  background: white;
}

#elementId:hover {
  background: red;
}

Answer 3

你甚至不必走那么远......

您可以使用：hover伪类简单轻松地完成此任务。

在你的CSS中创建两个规则

.myHoverDiv
{
  /* any styles you need here that show when not hovered over */
}

.myHoverDiv:hover
{
  /* any styles here that should change when the mouse hovers over it */
  background-color: red;
}

然后在你的标签上使用

<div class="myHoverDiv"> ... div inner contents here ... </div>

当鼠标悬停在它上面时，你的div的风格会如预期的那样改变

Answer 4

正如kumar v所问，我猜你应该使用“OnMouseOver”而不是“OnMouseEnter”来获得“悬停”效果。

所以你的PHP代码应该是这样的：

for($x=1; isset($_COOKIE["link$x"]); $x++) {
    echo '<div id="'.$x.'" OnMouseOver="myfunction('.$x.')">test</div>';
}

和Javascript：

function myfunction(which){
    document.getElementById(which).style.backgroundColor = "red";
}

Answer 5

更好地在一个区块中处理你的javascript，我建议你为你做一个处理程序，如果你使用jQuery和mouseover之类的常见javascript库，这会变得非常容易处理和调试，记得将jQuery库添加到页首。

服务器端：

echo '<div id="handler_id">';
for(x=1; isset($_COOKIE["link$x"]); $x++)
    echo <div id="'.$x.'">
}
echo '</div>';

客户端，此部分位于<script />标记内或分隔的js文件中：

(function(window, $) {
var window.handler = handler = {
    init: function() {
        $('#handler_id > div').mouseover(function(){
            console.log("mouse is over", this);
        });
    }
}
$(function(){ handler.init(); });
})(window, jQuery)

如何处理mouseenter上的元素？

5 个答案: