новое в javascript — события мыши

#javascript #css #html

#javascript #css #HTML

Вопрос:

Я новичок в javascript, и у меня почти нет опыта работы с событиями мыши. Для этого HTML-файла я пытаюсь выделить абзацы Romeo синим цветом, когда мышь перемещается по ним, а абзацы Juliet — розовым, затем вернуть их к нормальному цвету, серому (#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;
}  

Комментарии:

1. стреляй! я должен был указать, что я должен использовать только javascript!

Ответ №1:

Для этого вам не нужен 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>  

Ответ №2:

На самом деле вы можете использовать чистый 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:

Вы бы решили это с помощью CSS, а не событий мыши.

 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>  

Но чтобы решить это с помощью 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>