0

This jQuery function assigns an inline style of opacity:0.25 to each element with a class of grid-item. How do I override that and add CSS of opacity:1 to the HTML element title that is within grid-item?

This is the function that assigns an inline style of opacity .25 to the selected items that have a class of grid-item. It's part of a larger Isotope function that filters selected items.

// change opacity for selected/unselected items
  var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
    opacity: 1
  });
  $items.not(selectedClass).css({
    opacity: 0.25
  });

This is the HTML that results:

<div class="grid-item" style="opacity: 0.25;">
<div class="title">
</div>
</div>

How do I add CSS of opacity:1 to a title element? Either inline or in the style sheet?

Conceptually, this is what I need to do:

$items.not(selectedClass) $('.title').css('opacity',''1');

My question is how to add that to the function above? Or is there a better way?

Simply trying !important in the style sheet

.grid-item .title {
  opacity: 1 !important;
}

doesn't work.

Edit:

It appears that you can't change the opacity of a child element Disable opacity on child element when parent element has opacity unless you use background: rgba(255,255,255,0.8) on the parent. But trying background: rgba(255,255,255,0.8) in the function instead of opacity: 1 breaks it. How do I do this?:

// change opacity for selected/unselected items
      var selectedClass = '.' + selectedCategory;
      $items.filter(selectedClass).css({
      background: rgba(255,255,255,0.8)  //breaks
      });
      $items.not(selectedClass).css({
        opacity: 0.25
      });
Community
  • 1
  • 1
BlueDogRanch
  • 721
  • 1
  • 16
  • 43
  • You can use `.find()`... `$items.not(selectedClass).find('.title').css(...` but if the parent element is opacity `.25`, I don't think you can set a child to be more opaque than its parent. –  Jan 05 '17 at 20:32
  • I looked around and you're right about opacity; looks like I can use `background: rgba(255,255,255,0.8)` re: http://stackoverflow.com/questions/19457057/disable-opacity-on-child-element-when-parent-element-has-opacity But changing the `opacity: 0.25` to the background CSS breaks the function becuase of the ( and ) – BlueDogRanch Jan 05 '17 at 20:46

3 Answers3

0

Inline css has higher priority than external stylesheets so you have to do it with js like so:

$('.title').css({
    opacity: 1
});

For background opacity, wrap it into quotation marks:

$items.filter(selectedClass).css({
    background: 'rgba(255,255,255,0.8)'
});
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
  • It isn't a problem of priority, since the OP use `!important` in the style sheet and it's on a different element anyway. –  Jan 05 '17 at 20:37
  • Doesn't work; I just discovered that opacity can't easily be overridden unless I use background: rgba(255,255,255,0.8)` http://stackoverflow.com/questions/19457057/disable-opacity-on-child-element-when-parent-element-has-opacity – BlueDogRanch Jan 05 '17 at 20:47
  • @BlueDogRanch completely missed that, you're correct. – Serg Chernata Jan 05 '17 at 20:48
  • @BlueDogRanch Updated my answer. – Serg Chernata Jan 05 '17 at 22:17
0

well...

You can not override "opacity" in a nested element by css definition, but you can give the other nested elements opacity by simply using the .find method.

$items.not(selectedClass).find('*').not('.title').css('opacity','0.25');

if there is just one dimension under the element you can use .children instead to increase time.

$items.not(selectedClass).children().not('.title').css('opacity','0.25');
nerd420
  • 1
  • Doesn't work. It's difficult to change the opacity of a child element when the parent opacity is less. See question edit. – BlueDogRanch Jan 05 '17 at 21:27
0

When your .title element is in a div with opacity: 0.25 and so opacity of itself is 0.25 the real opacity of this element is 0.25 * 0.25 = 0.0625. And if you set the opacity of .title to 1.0 it has a real opacity 0.25.

This code is true:

.grid-item .title {
  opacity: 1 !important;
}

And it overrides the inline jquery added styles but it is not what you want for the reason that i said.

and update your code:

 var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
  background: rgba(255,255,255,0.8)  //breaks
  });
  $items.not(selectedClass).css({
    opacity: 0.25
  });

to this:

 var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
  background: 'rgba(255,255,255,0.8)'  //breaks
  });
  $items.not(selectedClass).css({
    opacity: '0.25'
  });
Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23