Promoted Links: Gray out and make it unclickable

Question

I have some promoted links some of which I want to be active and others I want grayed out and unclickable. Been toying around with some css but have had no luck yet.

Have tried the sample below but it has no effect.

.ms-tileview-tile-content > a {
    pointer-events: none;
}

Attempting to gray out the tile.

$('.ms-tileview-tile-content').wrap('<div class="grayOut"></div>');

.grayOut {
    opacity: 0.6;
}

Answer 1

Pointer-events is for Mozilla Firefox only. You can target single tiles using the :nth-child() selector with CSS and Jquery.

This example below colors the second tile gray, colors the tiles title gray and disables the clickevent.

<script type="text/javascript" src="../SiteAssets/jquery-3.1.1.min.js"></script>

<style type="text/css">
.ms-tileview-tile-root:nth-child(2) .ms-tileview-tile-content {
    background-color:Grey;  
}
.ms-tileview-tile-root:nth-child(2) .ms-tileview-tile-titleMedium {
    color:Grey;
}
</style>

<script>
$( document ).ready(function() {
$('.ms-tileview-tile-root:nth-child(2)').find('a').removeAttr('clickAction');
});
</script>

Answer 2

Regardless, the code is working or not, but I think you can't achieve that scenario (Gray out some links) because there's no ID for every link to control that. so in this case, if the code is working it will gray out all links.

What I think, you are trying to prevent unauthorized people from accessing these links so I suggest to Hide these links rather than diable it, by managing Item Permission.

Now the links should be shown only to the authorized people based on the assigned permission for each link.