Floriane Floriane - 1 year ago 61
CSS Question

Change the color of a text when a button is flipped

I guess my question has already been asked many times but I do not find the posts adequate..

I try to change the color of my text 'title' when my button is flipped over.
With the 'title' parameter, the displayed text ('Réduire la fenêtre') is white on black. I would like this one to appear black on white.



.top-bar-btn .create{
margin-right: 60px;
padding-bottom: 1px;
}

.top-bar-btn .create:hover {
border-radius: 12px;
background: #8a8989;
color: white;
opacity: 1; }

<button class="top-bar-btn reduce"
title="Réduire la fenêtre"
(click) = "onReduceChatThreads()">
<i class="glyphicon glyphicon-minus"></i>
</button>




Answer Source

It's not possible to style title attribute which is added in button tag, instead you could do that using pseudo selector as below,

.top-bar-btn .create {
  margin-right: 60px;
  padding-bottom: 1px;
  position: relative;
}

.top-bar-btn .create:hover {
  border-radius: 12px;
  background: #8a8989;
  color: white;
  opacity: 1;
}

.top-bar-btn:before {
  content: "Réduire la fenêtre";
  position: absolute;
  top: 30px;
  left: 30px;
  display: none;
  font-size: 12px;
  background: #fff;
  border-radius: 5px;
  border: 1px inset rgba(0, 0, 0, 0.2);
  padding: 5px;
  box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.2);
}

.top-bar-btn:hover:before {
  display: block;
}
<button class="top-bar-btn reduce" title="" (click)="onReduceChatThreads()">
  <i class="glyphicon glyphicon-minus"></i>
</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download