悬停时更改颜色

绍拉卜·库玛

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 >&nbsp; &nbsp; &nbsp;Hello <b>"
            + 5645
            + "<b><br><br> </p></td></tr> "
            + " <tr><td><p >"
            + "&nbsp; &nbsp;&nbsp;&nbsp;"+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> ";

在这里，我有两个批准和拒绝按钮，它们在悬停时会变为绿色。我的要求是，当我将鼠标悬停在批准按钮上时会更改绿色，而当拒绝按钮时会更改为红色。我需要进行哪些更改？

阿罗克·帕特尔（Alok Patel）

添加一个类以拒绝按钮并覆盖超链接样式。

我们可以将类添加到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 >&nbsp; &nbsp; &nbsp;Hello <b>"
            + 5645
            + "<b><br><br> </p></td></tr> "
            + " <tr><td><p >"
            + "&nbsp; &nbsp;&nbsp;&nbsp;"+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> ";

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。