new to javascript - mouse events

问题: I am new to javascript and I have almost no experience with mouse events. For this HTML file, I am trying to highlight the Romeo paragraphs blue when the mouse rolls over t...

问题:

I am new to javascript and I have almost no experience with mouse events. For this HTML file, I am trying to highlight the Romeo paragraphs blue when the mouse rolls over them and the Juliet paragraphs with pink then have them go back to normal, grey (#CCC8C8) when the mouse leaves. can someone show me how this is done with - document.getElementsByName()

<!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>


回答1:

You do not need JavaScript to do this. You can use CSS.

...then have them go back to normal, gray (#CCC8C8), when the mouse leaves

Please Note: The normal color of the text is not #CCC8C8, it is black.

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>


回答2:

You can actually use pure 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="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>


回答3:

You would solve this with CSS and not mouse events.

p[name='romeo']:hover {
  background-color: aqua;
}

p[name='juliet']:hover {
  background-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>

But to solve it with JavaScript

document.querySelectorAll('p').forEach(p => {
  p.addEventListener('mouseenter', (e) => {
    if(e.target.classList.contains('romeo')) {
      e.target.classList.add('blue');
    }

    if(e.target.classList.contains('juliet')) {
      e.target.classList.add('pink');
    }  
  });
  
  p.addEventListener('mouseout', (e) => {
    e.target.classList.remove('pink');
    e.target.classList.remove('blue');
  });  
  
})
.blue {
  background-color: aqua;
}

.pink {
  background-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 class="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 class="juliet"><span class="character">JULIET</span><br />
    Ay me!</p>

    <p class="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 class="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 class="romeo"><span class="character">ROMEO</span><br />
    [Aside] Shall I hear more, or shall I speak at this?</p>

    <p class="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 class="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 class="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 class="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 class="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 class="romeo"><span class="character">ROMEO</span><br />
    Neither, fair saint, if either thee dislike.</p>

    <p class="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 class="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 class="juliet"><span class="character">JULIET</span><br />
    If they do see thee, they will murder thee.</p>

    <p class="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>


回答4:

    document.body.onmouseover = handler;

    function handler(event) {
        var pname = event.target.getAttribute('name');
        if (pname == 'romeo') {
            event.target.style.background = 'blue';
        }

        if (pname == 'juliet') {
            event.target.style.background = 'pink';
        }

    }

    document.body.onmouseout = handlerOver;
    function handlerOver(event) {
        var pname = event.target.getAttribute('name');
        if (pname == 'romeo' || pname == 'juliet') {
            event.target.style.background = '';
        }
    }
 
<!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>

  • 发表于 2019-03-22 01:49
  • 阅读 ( 80 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除