JavaScript的新功能-鼠標事件
[英]new to javascript - mouse events
問題描述
我是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; }
4 個解決方案
解決方案1
3 2019-03-20 23:30:54
您不需要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
1 2019-03-20 23:29:15
您可以使用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>
解決方案3
1 2019-03-20 23:30:37
您實際上可以使用純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>
解決方案4
0 2019-03-21 01:15:29
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>
javascript處理鼠標事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.