change color on hover

时间：2016-04-07 10:47:55

标签： html css 

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> ";

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?

3 个答案:

答案 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 >&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> ";

答案 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（例如拒绝的红色，批准的绿色）

相关问题
最新问题