0

My parent has a class clickable which changes the opacity to 0.5 on hover however, my problem is that I want my child (tooltip) to be opacity 1. Even my !important is getting ignored and I can't get around that.

It's not really a duplicate as I can't fix my styling with a background opacity..

const username = document.getElementById('username');

username.addEventListener('mouseenter', function() {
    username.classList.toggle('tooltip');
});

username.addEventListener('mouseleave', function() {
    username.classList.toggle('tooltip');
});
.clickable {
  cursor: pointer;
}
.clickable:hover {
  opacity: 0.5;
}

.tooltip:after {
  content: 'Tooltip';
  position: absolute;
  background-color: lightblue;
  transition: linear 0.1s;
  top: 30px;
  left: 20px;
  padding: 8px;
  opacity: 1 !important;
}
<div class="clickable">
  <span id="username">Username</span>
</div>
LazioTibijczyk
  • 1,701
  • 21
  • 48
  • apply opacity to `username` instead – Temani Afif Jul 08 '19 at 08:53
  • @TemaniAfif doesn't make any difference. – LazioTibijczyk Jul 08 '19 at 08:58
  • and put the tooltip to the parent element – Temani Afif Jul 08 '19 at 09:01
  • 1
    This worked for me when I used the code snippet. However I cannot submit an answer due to its being "duplicate" .clickable:hover:not(.tooltip:after) { opacity: 0.5; } – Timppa Jul 08 '19 at 09:06
  • 1
    please read ALL the answer, not only the first one talking about background. You need to understand that opacity on an element affect all the childs thus you have to change your structure and don't consider a parent/child relation – Temani Afif Jul 08 '19 at 09:40
  • @Timppa that code is not working, it's simply invalid so you are not applying any opacity and of course there is no issue: https://jsfiddle.net/x2qkgv80/ – Temani Afif Jul 08 '19 at 09:49
  • It did work with the fiddle but since you made it duplicate, I cannot answer the question. – Timppa Jul 08 '19 at 10:11
  • @Temani Afif I couldn't edit my previous comment: I changed other CSS rules as well for my own snippet answer, but I thought the one line could've make the change but I cannot add long comments so therefore I just copy pasted the .clickable.hover:not(.tooltip:after) code. – Timppa Jul 08 '19 at 10:29
  • @Timppa you can still share you fiddle here with a wokring example. Your line of code is invalid like you can see in the fiddle I shared – Temani Afif Jul 08 '19 at 10:33
  • @Temani Afif Yes I know the fiddle code doesn't work, I noticed the error that the Username doesn't get 50% opacity. As I said before, I had more code as I was trying it out and succeeded, but have deleted the answer since I couldn't post an answer. – Timppa Jul 08 '19 at 10:37

0 Answers0