String mailData = " <html> "
+ " <head> "
+ " <script>"
+ " </script>"
+ " <style> "
+ " button:hover{background-color:#00ffff;color:#00ffff;font-style: italic;} "
+ " table{border-collapse: collapse;} "
+ " #th1{ width:5cm;height:1cm;text-align:center;background-color:#00ffff;border:2px solid;} "
+ " #td1{text-align:center;background-color:#00ffff;border:2px solid;} "
+ " a:link, a:visited { "
+ " background-color: #003333; "
+ " color: white; "
+ " padding: 14px 25px; "
+ " text-align: center; "
+ " text-decoration: none; "
+ " display: inline-block; "
+ " } "
+ " a:hover, a:active { "
+ " background-color: #2eb82e;"
+ " color: #ffffff "
+ " } "
+ " </style> "
+ " </head> "
+ " <body style=' background-color:white;color:blue'> "
+ " <div style='border:1px solid black ;background-color:white; '> "
+ " <table> " + " <tr><td><p > Hello <b>"
+ 5645
+ "<b><br><br> </p></td></tr> "
+ " <tr><td><p >"
+ " "+56456
+ "-"
+ 636
+ " has submitted a leave request today with the following details :"
+ " </p><br><br></td></tr></table> "
+ " <table border='border' style='margin:0px auto;'> "
+ " <tr style='width:5cm;height:1cm;text-align:left;background-color: #009999;border:2px solid;color:white;'> "
+ tableHeader
+ " </tr> "
+ " <tr style='width:5cm;height:1cm;text-align:left;background-color: #9f9fdf;border:2px solid;color:white;'> "
+ tableData
+ " </tr> "
+ "<table style='margin:0px auto;' >"
+ " <tr>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+ " <a href='"
+ 546456
+ "' ><b>Approve<b></a>"
+ " </td>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+" <a href='"+ url+"' ><b>Reject<b></a>"
+ " </td> </tr> "
+ " </table> "
+ "<br><br><br>"
+ "<center><b>Click on above Approve/Reject button to Approve/Reject this leave request or login to https://my.thbs.com to Approve/Reject the same.</b></center><br><br><br>"
+ " <br> "
+ "<div style='margin-left:1cm;color:black' >Regards,<br>MIS"
+ "<br>"
+ "<br>"
+ "<b style='color:red'>Note:</b> The purpose of this email is to Approve/Reject a leave request directly through mailbox reducing the effort to login to <b style='color:blue'>https://my.thbs.com.</b>"
+ "This is an auto generated email."
+ "Please do not reply or forward this Email as the information inside this email is not supposed to be disclosed."
+ "Incase of FWD then recipient can also Approve/Reject the request."
+ " </div>" + " </div> " + " </body> " + " </html> ";
Here i have two approve and reject buttons which changes color to green on hover.My requirement is to change green color when i hover over approve button and red when reject button.what changes do i have to make?
答案 0 :(得分：1)
添加一个拒绝按钮的按钮并覆盖超链接样式。
我们可以将类添加到Hyperlink中，如下所示。
<a href="#" class="some_class">Some text</a>
现在我们使用该类来设置特定元素的样式，如下所示。
a.some_class {
/* Your styles goes here */
}
a.some_class:hover {
/* Your hover styles goes here */
}
请参阅以下代码。
String mailData = " <html> "
+ " <head> "
+ " <script>"
+ " </script>"
+ " <style> "
+ " button:hover{background-color:#00ffff;color:#00ffff;font-style: italic;} "
+ " table{border-collapse: collapse;} "
+ " #th1{ width:5cm;height:1cm;text-align:center;background-color:#00ffff;border:2px solid;} "
+ " #td1{text-align:center;background-color:#00ffff;border:2px solid;} "
+ " a:link, a:visited { "
+ " background-color: #003333; "
+ " color: white; "
+ " padding: 14px 25px; "
+ " text-align: center; "
+ " text-decoration: none; "
+ " display: inline-block; "
+ " } "
+ " a:hover, a:active { "
+ " background-color: #2eb82e;"
+ " color: #ffffff "
+ " } "
+ " a.rejectBtn:hover, a.rejectBtn:active { "
+ " background-color: #ff0000;"
+ " color: #ffffff "
+ " } "
+ " </style> "
+ " </head> "
+ " <body style=' background-color:white;color:blue'> "
+ " <div style='border:1px solid black ;background-color:white; '> "
+ " <table> " + " <tr><td><p > Hello <b>"
+ 5645
+ "<b><br><br> </p></td></tr> "
+ " <tr><td><p >"
+ " "+56456
+ "-"
+ 636
+ " has submitted a leave request today with the following details :"
+ " </p><br><br></td></tr></table> "
+ " <table border='border' style='margin:0px auto;'> "
+ " <tr style='width:5cm;height:1cm;text-align:left;background-color: #009999;border:2px solid;color:white;'> "
+ tableHeader
+ " </tr> "
+ " <tr style='width:5cm;height:1cm;text-align:left;background-color: #9f9fdf;border:2px solid;color:white;'> "
+ tableData
+ " </tr> "
+ "<table style='margin:0px auto;' >"
+ " <tr>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+ " <a href='"
+ 546456
+ "' ><b>Approve<b></a>"
+ " </td>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+" <a href='"+ url+"' class='rejectBtn' ><b>Reject<b></a>"
+ " </td> </tr> "
+ " </table> "
+ "<br><br><br>"
+ "<center><b>Click on above Approve/Reject button to Approve/Reject this leave request or login to https://my.thbs.com to Approve/Reject the same.</b></center><br><br><br>"
+ " <br> "
+ "<div style='margin-left:1cm;color:black' >Regards,<br>MIS"
+ "<br>"
+ "<br>"
+ "<b style='color:red'>Note:</b> The purpose of this email is to Approve/Reject a leave request directly through mailbox reducing the effort to login to <b style='color:blue'>https://my.thbs.com.</b>"
+ "This is an auto generated email."
+ "Please do not reply or forward this Email as the information inside this email is not supposed to be disclosed."
+ "Incase of FWD then recipient can also Approve/Reject the request."
+ " </div>" + " </div> " + " </body> " + " </html> ";
答案 1 :(得分：1)
更改此
+ " <a href='"
+ 546456
+ "' ><b>Approve<b></a>"
+ " </td>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+" <a href='"+ url+"' ><b>Reject<b></a>"
到这个
+ " <a onmouseover=\"this.style.backgroundcolor='#ff0000'\" onmouseout=\"this.style.backgroundcolor='#003333'\" href='"
+ 546456
+ "' ><b>Approve<b></a>"
+ " </td>"
+ " <td style='border:none;background-color:white;width:3cm;'>"
+"<br><br>"
+" <a onmouseover=\"this.style.backgroundcolor='#00ff00'\" onmouseout=\"this.style.backgroundcolor='#003333'\" href='"+ url+"' ><b>Reject<b></a>"
答案 2 :(得分：1)
您的按钮不能相互区分，因此它们都使用相同的格式。您可以为每个按钮指定一个id属性，然后您可以为其提供自己的css。
例如，你可以制作按钮
<a id="approveBtn" href="something">
<b>Approve</b>
</a>
<a id="rejectBtn" href="something">
<b>Reject</b>
</a>
要区分每个按钮，然后在你的CSS中你会有
#rejectBtn:hover
{
background-color: #2ceg2f;
color: #ffffff;
}
#approveBtn:hover
{
background-color: #2eb82e;
color: #ffffff;
}
或者你想要的任何颜色。
查看用于制作类似格式的html元素的id和类，用于广义内容的类（按钮的半径等）和用于该实例的唯一内容的id（例如拒绝的红色，批准的绿色）