gpt4 book ai didi

javascript - 当鼠标移到列表项上时在 JQuery 中使用悬停

转载 作者:行者123 更新时间:2023-11-30 18:55:17 25 4
gpt4 key购买 nike

您好,我正在处理这份 list 。当我将鼠标移到列表项上时,我想将列表项的边框颜色更改为红色,当我将鼠标移开时,它应该变回白色。这是我的 html

<html> 
<head>
<title>JQuery Problem 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="problem1.js"></script>
</head>
<body>
<ol>
<li>Comp 250
<ul>
<li>HTML</li>
<li>CSS</li>
<li>CGI</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</li>
<li>Comp 345
<ul>
<li>Objects and classes</li>
<li>Static and constant members</li>
<li>Operator overloading</li>
<li>Templates</li>
<li>Inheritance</li>
<li>Polymorphism</li>
</ul>
</li>
<li>Comp 431
<ul>
<li>Perl language</li>
<li>File uploads and downloads</li>
<li>AJAX and JSON</li>
<li>Java Servlets</li>
<li>JSP</li>
</ul>
</li>
</ol>
</body>
</html>

这是我的 jquery

$(document).ready(function()
{


$("ol > li").css({margin: "1em", fontWeight: "bold"});
$("ol li li").css({fontWeight: "normal"});


$("li").hover(function()
{
$(this).css('border-color', 'red'); //switches color when on
},
function()
{
$(this).css('border-color', 'white') //switches back when the mouse moves off
})




});

最佳答案

除非您还没有指定边框宽度和样式,否则您所拥有的看起来是正确的。在那种情况下,没有任何东西可以显示颜色。

例如,您可以这样做:

    $("li").hover(function()
{
$(this).css('border', '1px solid red');
},
function()
{
$(this).css('border', '1px solid white')
});

或者在悬停之前设置初始边框:

$("ol > li").css({borderWidth:"1px", borderStyle:"solid", margin: "1em", fontWeight: "bold"});
$("ol li li").css({fontWeight: "normal"});

$("li").hover(function()
{
$(this).css('border-color', 'red');
},
function()
{
$(this).css('border-color', 'white')
})

关于javascript - 当鼠标移到列表项上时在 JQuery 中使用悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2350008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com