How can i do onclick event with html,css,js-CodePudding

I want the css codes of the blog1popup class to change when the image is clicked. I know how to do this with hover, but i don't know how to make this action happen by clicking.

The element I want to use as this button;

<div >
<div >
   <div >
      <div >
         <img src="assets/img/blog-grid-1.jpg" alt=""></a>
         <a href="" > <span >14</span> <span >April</span></a>
      </div>
      <a href=""   style="margin-top: -1rem;">Fransa Geneline Islak Mendil İhracı</a> 
      <p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
   </div>
</div>

This is the element I want to have changes in the css codes.

<div ></div>

Example on hover technique;

.blog-item:hover > .blog1popup{
opacity: 100%;
}

CodePudding user response：

You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.

Eg.

$(".blog-item").on("click", function (e) {
  $(".blog1popup").css("opacity", "100%");
  $(".blog1popup").addClass("any-class");
});