изменить цвет при наведении указателя поворота

-3

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

Здесь у меня есть две кнопки подтверждения и отклонения, которые меняют цвет на зеленый на зависании. Мое требование - менять зеленый цвет, когда я навешиваю над кнопкой подтверждения и красным, когда кнопка отклонения. Какие изменения у меня есть делать?изменить цвет при наведении указателя поворота

источник

2016-04-07 saurabh kumar

Где ваша кнопка "Отменить"? Я могу видеть только кнопку Approved –

.................. –

Привет, Саураб, пожалуйста, попытайтесь придерживаться [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve): Все форматирование строк не важно, чтобы задать вопрос, только вопрос html/css. – cfi

Добавьте класс, чтобы отклонить кнопку и переопределить стиль гиперссылки.

Мы можем добавить класс в гиперссылку, как указано ниже.

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

источник

2016-04-07 10:56:41

Я чувствую, что более полезно объяснить, что это делает, чем просто передать рабочую версию ... И идентификатор, вероятно, будет достаточным в этом случае, а не для класса. В идеале у вас будет класс для кнопок, затем идентификатор для отклонения и подтверждения различий кнопок. – WearyWanderer

Я написал, что делать в верхней части кода, чтобы он понял. –

Изменить этот

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

источник

2016-04-07 10:58:40 chriswirz

Ваши кнопки не различают друг с другом так, что они используют один и тот же форматирование. Вы можете дать каждой кнопке свойство 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, классов для обобщенного материала (радиус для кнопки и т. Д.) И идентификаторов для уникальных для этого экземпляра (таких как красный для отклонения, зеленый для одобрения)

источник

2016-04-07 11:05:26 WearyWanderer

изменить цвет при наведении указателя поворота

ответ

Смежные вопросы