Struggling to eliminate the blur effect on an image inside a grid element? It seems modifying the properties of an element within a grid class is causing some issues.
To simplify, I conducted a basic test: I managed to change the ppp2 class when hovering over ppp using the following code:
<script>
$(document).ready(function(){
$("ppp").hover(function(){
$("ppp2").css("color", "#ff00ff");
}, function(){
$("ppp2").css("color", "#000000");
});
});
</script>
However, placing the ppp2 element inside a grid class results in it no longer working:
<div class="wgrid-container" id="Locations">
<ppp2>
prova<br>prova<br>prova<br>prova<br>prova<br>
</ppp2>
</div>
The wgrid-container defined as follows:
.wgrid-container {
display: grid;
grid-template-areas:
'header header header header header header header header'
'menu menu main main main right right right'
'menu menu footer footer footer footer footer footer';
grid-gap: 0px;
background-color: #ffffff;
padding: 0px;
margin: 0px;
}Removing the display: grid; allows jQuery to work, although losing the grid layout.