新手到javascript - 鼠标事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了新手到javascript - 鼠标事件相关的知识,希望对你有一定的参考价值。

我是javascript的新手,我几乎没有鼠标事件的经验。对于这个html文件,我试图突出显示罗密欧段落蓝色当鼠标滚过它们和朱丽叶段落粉红色然后让它们恢复正常,灰色(#CCC8C8)鼠标离开时。 (编辑)我忘了提到我只是尝试使用JavaScript而不是CSS这样做,非常感谢。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Romeo and Juliet</title>
<link href="week7.css" rel="stylesheet" type="text/css">
<script src="week7_start.js"></script>
</head>

<body>
    <h1>"Romeo and Juliet" by William Shakespeare - Act II, Scene II</h1>

    <p name="romeo"><span class="character">ROMEO</span><br />
    But, soft! what light through yonder window breaks?<br />
    It is the east, and Juliet is the sun.<br />
    Arise, fair sun, and kill the envious moon,<br />
    Who is already sick and pale with grief,<br />
    That thou her maid art far more fair than she:<br />
    Be not her maid, since she is envious;<br />
    Her vestal livery is but sick and green<br />
    And none but fools do wear it; cast it off.<br />
    It is my lady, O, it is my love!<br />
    O, that she knew she were!<br />
    She speaks yet she says nothing: what of that?<br />
    Her eye discourses; I will answer it.<br />
    I am too bold, 'tis not to me she speaks:<br />
    Two of the fairest stars in all the heaven,<br />
    Having some business, do entreat her eyes<br />
    To twinkle in their spheres till they return.<br />
    What if her eyes were there, they in her head?<br />
    The brightness of her cheek would shame those stars,<br />
    As daylight doth a lamp; her eyes in heaven<br />
    Would through the airy region stream so bright<br />
    That birds would sing and think it were not night.<br />
    See, how she leans her cheek upon her hand!<br />
    O, that I were a glove upon that hand,<br />
    That I might touch that cheek!</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    Ay me!</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    She speaks:<br />
    O, speak again, bright angel! for thou art<br />
    As glorious to this night, being o'er my head<br />
    As is a winged messenger of heaven<br />
    Unto the white-upturned wondering eyes<br />
    Of mortals that fall back to gaze on him<br />
    When he bestrides the lazy-pacing clouds<br />
    And sails upon the bosom of the air.</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    O Romeo, Romeo! wherefore art thou Romeo?<br />
    Deny thy father and refuse thy name;<br />
    Or, if thou wilt not, be but sworn my love,<br />
    And I'll no longer be a Capulet.</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    [Aside] Shall I hear more, or shall I speak at this?</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    'Tis but thy name that is my enemy;<br />
    Thou art thyself, though not a Montague.<br />
    What's Montague? it is nor hand, nor foot,<br />
    Nor arm, nor face, nor any other part<br />
    Belonging to a man. O, be some other name!<br />
    What's in a name? that which we call a rose<br />
    By any other name would smell as sweet;<br />
    So Romeo would, were he not Romeo call'd,<br />
    Retain that dear perfection which he owes<br />
    Without that title. Romeo, doff thy name,<br />
    And for that name which is no part of thee<br />
    Take all myself.</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    I take thee at thy word:<br />
    Call me but love, and I'll be new baptized;<br />
    Henceforth I never will be Romeo.</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    What man art thou that thus bescreen'd in night<br />
    So stumblest on my counsel?<br /></p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    By a name<br />
    I know not how to tell thee who I am:<br />
    My name, dear saint, is hateful to myself,<br />
    Because it is an enemy to thee;<br />
    Had I it written, I would tear the word.</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    My ears have not yet drunk a hundred words<br />
    Of that tongue's utterance, yet I know the sound:<br />
    Art thou not Romeo and a Montague?</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    Neither, fair saint, if either thee dislike.</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    How camest thou hither, tell me, and wherefore?<br />
    The orchard walls are high and hard to climb,<br />
    And the place death, considering who thou art,<br />
    If any of my kinsmen find thee here.</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    With love's light wings did I o'er-perch these walls;<br />
    For stony limits cannot hold love out,<br />
    And what love can do that dares love attempt;<br />
    Therefore thy kinsmen are no let to me.</p>
    
    <p name="juliet"><span class="character">JULIET</span><br />
    If they do see thee, they will murder thee.</p>
    
    <p name="romeo"><span class="character">ROMEO</span><br />
    Alack, there lies more peril in thine eye<br />
    Than twenty of their swords: look thou but sweet,<br />
    And I am proof against their enmity</p>
</body>
</html>

CSS - 

@charset "utf-8";
body {
    background-color: #CCC8C8;
}
p {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    margin-left: 50px;
    padding: 15px;
    text-indent: 15px;
} 
.character {
    padding: 35px;
    color: #A70312;
    font-weight: bold;
}
答案

您不需要JavaScript来执行此操作。你可以使用CSS。

...当鼠标离开时,让它们恢复正常,灰色(#CCC8C8)

请注意:文本的正常颜色不是#CCC8C8,它是黑色的。

p[name=romeo]:not(:hover),p[name=juliet]:not(:hover){ 
  color: #CCC8C8;
}
p[name=romeo]:hover{
  color: blue;
}
p[name=juliet]:hover{ 
  color: pink;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Romeo and Juliet</title>
<link href="week7.css" rel="stylesheet" type="text/css">
<script src="week7_start.js"></script>
</head>

<body>
    <h1>"Romeo and Juliet" by William Shakespeare - Act II, Scene II</h1>

    <p name="romeo"><span class="character">ROMEO</span><br />
    But, soft! what light through yonder window breaks?<br />
    It is the east, and Juliet is the sun.<br />
    Arise, fair sun, and kill the envious moon,<br />
    Who is already sick and pale with grief,<br />
    That thou her maid art far more fair than she:<br />
    Be not her maid, since she is envious;<br />
    Her vestal livery is but sick and green<br />
    And none but fools do wear it; cast it off.<br />
    It is my lady, O, it is my love!<br />
    O, that she knew she were!<br />
    She speaks yet she says nothing: what of that?<br />
    Her eye discourses; I will answer it.<br />
    I am too bold, 'tis not to me she speaks:<br />
    Two of the fairest stars in all the heaven,<br />
    Having some business, do entreat her eyes<br />
    To twinkle in their spheres till they return.<br />
    What if her eyes were there, they in her head?<br />
    The brightness of her cheek would shame those stars,<br />
    As daylight doth a lamp; her eyes in heaven<br />
    Would through the airy region stream so bright<br />
    That birds would sing and think it were not night.<br />
    See, how she leans her cheek upon her hand!<br />
    O, that I were a glove upon that hand,<br />
    That I might touch that cheek!</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    Ay me!</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    She speaks:<br />
    O, speak again, bright angel! for thou art<br />
    As glorious to this night, being o'er my head<br />
    As is a winged messenger of heaven<br />
    Unto the white-upturned wondering eyes<br />
    Of mortals that fall back to gaze on him<br />
    When he bestrides the lazy-pacing clouds<br />
    And sails upon the bosom of the air.</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    O Romeo, Romeo! wherefore art thou Romeo?<br />
    Deny thy father and refuse thy name;<br />
    Or, if thou wilt not, be but sworn my love,<br />
    And I'll no longer be a Capulet.</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    [Aside] Shall I hear more, or shall I speak at this?</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    'Tis but thy name that is my enemy;<br />
    Thou art thyself, though not a Montague.<br />
    What's Montague? it is nor hand, nor foot,<br />
    Nor arm, nor face, nor any other part<br />
    Belonging to a man. O, be some other name!<br />
    What's in a name? that which we call a rose<br />
    By any other name would smell as sweet;<br />
    So Romeo would, were he not Romeo call'd,<br />
    Retain that dear perfection which he owes<br />
    Without that title. Romeo, doff thy name,<br />
    And for that name which is no part of thee<br />
    Take all myself.</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    I take thee at thy word:<br />
    Call me but love, and I'll be new baptized;<br />
    Henceforth I never will be Romeo.</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    What man art thou that thus bescreen'd in night<br />
    So stumblest on my counsel?<br /></p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    By a name<br />
    I know not how to tell thee who I am:<br />
    My name, dear saint, is hateful to myself,<br />
    Because it is an enemy to thee;<br />
    Had I it written, I would tear the word.</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    My ears have not yet drunk a hundred words<br />
    Of that tongue's utterance, yet I know the sound:<br />
    Art thou not Romeo and a Montague?</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    Neither, fair saint, if either thee dislike.</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    How camest thou hither, tell me, and wherefore?<br />
    The orchard walls are high and hard to climb,<br />
    And the place death, considering who thou art,<br />
    If any of my kinsmen find thee here.</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    With love's light wings did I o'er-perch these walls;<br />
    For stony limits cannot hold love out,<br />
    And what love can do that dares love attempt;<br />
    Therefore thy kinsmen are no let to me.</p>

    <p name="juliet"><span class="character">JULIET</span><br />
    If they do see thee, they will murder thee.</p>

    <p name="romeo"><span class="character">ROMEO</span><br />
    Alack, there lies more peril in thine eye<br />
    Than twenty of their swords: look thou but sweet,<br />
    And I am proof against their enmity</p>
</body>
</html>
另一答案

你实际上可以使用纯CSS:

p[name="juliet"]:not(:hover), p[name="romeo"]:not(:hover) {
  color: #CCC8C8;
}
p[name="juliet"]:hover {
  color: hotpink;
}
p[name="romeo"]:hover {
  color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Romeo and Juliet</title>
<link href="week7.css" rel="stylesheet" type="text/css">
<script src="wee

以上是关于新手到javascript - 鼠标事件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 javascript 计时来控制鼠标停止和鼠标移动事件

JavaFX窗口拖动

JavaScript事件

将 JavaScript 鼠标事件从一个元素传播到另一个元素?

JavaScript HTML DOM 事件

如何将鼠标事件调用到 javascript 中位于其他对象后面的 dom 对象?