当鼠标悬停时如何更改div边框

Question

大家好， 我有一个div，在鼠标悬停时想要更改div的边框。并且，id是动态更改的。请为此提供任何帮助。 谢谢。

- Chauhan

---

你尝试过哪些代码却没有成功呢？ - Tim S. Van Haren

Answer 1

这个行不通吗？

div {}
div:hover {border:1px solid #000000;}

- Jinesh Parekh

---

很棒的答案，保持简单！ - ppolak

Answer 2

如果您希望它在所有浏览器中都能正常工作，您需要使用JavaScript而不是伪类:hover。旧版本或IE不喜欢对不是锚点的元素使用:hover。

因此，您可以为div提供一个class，然后使用jQuery轻松选择它。这可能是最简单的方法。

例如：

$(function(){

  $('.yourclass').hover(
    function(){
       $(this).addClass('hovered');
    },
    function(){
       $(this).removeClass('hovered');
    }
  );

});

当鼠标悬停在类中时，它包含了你的悬停状态的CSS。

如果你想在悬停时更改ID，可以在上面的代码中添加 $(this).attr('id','newID');

- Coin_op

---

<script type="text/javascript"> function changeBoder(divID){ alert(divID); document.getElementById(divID).style.border-color="#0000ff;"; } </script> - Chauhan

我正在尝试使用JavaScript。我是初学者，所以不知道JavaScript的语法确切。请回复。 - Chauhan

Answer 3

CSS提供了:hover选择器，可以在div上使用。

例如：

div:hover { border: 1px solid #454545; }

如果要动态更改id，我会使用jQuery。

jQuery(this).attr("id",newId);

如果您发布特定的代码，我可以帮助您针对您的特定情况进行语法方面的支持...

- jackreichert

---

` <script type="text/javascript"> function changeBoder(divID){ alert(divID); document.getElementById(divID).style.border-color="#0000ff;"; } </script>` - Chauhan

请看这段代码。我正在尝试使用JavaScript，divID是动态的。请回复，非常紧急。 - Chauhan

Answer 4

希望这可以帮助您。

 <div onmouseover="somefunction(<?php echo $divid ?>)"> </div>


<script>
function somefunction(id)
{
document.getElementById(id).style.border="10px #FF0000 solid";
}
</script>

- Shakti Singh