Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead.

The element I want to use as the button;

<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
   <div class="blog-item">
      <div class="img">
         <img src="assets/img/blog-grid-1.jpg" alt=""></a>
         <a href="" class="date"> <span class="day">14</span> <span class="month">April</span></a>
      </div>
      <a href="" class="title padding-30px"  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 that I would like to update the CSS codes for. 

<div class="blog1popup"></div>

Example using the hover technique;

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

Answer №1

If you want to add a click event to the blog-item class, you can then use jQuery methods to modify any element or change CSS properties.

For example:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

javascriptweb-componentcustom-elementhtml5-template

PHP script for conducting sensitivity analysis

I am working with a PHP application that calculates a final result based on user input in multiple forms. Imagine a scenario where a user enters a value of 5 on the first page, which is passed through _POST to the next page. Then, they enter a value of 2 ...

phpjqueryajax

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

JavaScript can be used to deactivate the onclick attribute

Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated. Markup <a id="leftbutton" href="#" onclick="showDiv(this.id); return ...

javascriptcsshtmlonclick

What is the best way to initiate a new animation from the current position?

Here is my custom box: <div class="customBox"></div> It features a unique animation: .customBox{ animation:right 5s; animation-fill-mode:forwards; padding:50px; width:0px; height:0px; display:block; background-color:bla ...

javascripthtmlcssanimation

Using CSS to create hover effects for specific classes of elements

Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but ...

htmlcssangular

What is a creative way to get rid of old content on a webpage using jQuery without relying on the

As I work on my crossword project, I have almost completed it, but encountering a problem. Within my HTML code, I have a select list that loads a .JSON file using Javascript. <form method="post" id="formulaire"> <div class="toto"> <sel ...

javascriptjqueryhtml

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6

Error: The database has encountered a duplication error in the followers index of the MERNSM.users collection, with a duplicate key value of undefined

Encountered a MongoServerError: E11000 duplicate key error collection: MERNSM.users index: followers_1 dup key: { followers: undefined }. This is puzzling as there is no unique constraint set in my schema. I am unsure of what could be causing this issue, e ...

javascriptnode.jsmongodb

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

htmlcsssvgresponsive

WordPress REST API - Issue with New Category returning undefined, yet still able to be accessed

Currently, I am utilizing the WordPress REST API and have successfully created a new category. However, when making queries to the API, it is returning undefined for that particular category. Upon visiting: /wp-json/wp/v2/categories, category 17 does not ...

javascriptjsonwordpressrest

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield

Issue with updating the content of a div using Ajax in combination with jQuery tablesorter

I've been encountering difficulties with my tablesorter and ajax div content update. Whenever the ajax reloads, all the tablesorter functionalities disappear. I attempted to use livequery, but it only works for the initial listing of the table. <s ...

jqueryajaxtablesorter

Performing a function multiple times by clicking the mouse

I have a function called week(), which provides me with the current first (startDate) and last (endDate) day of the week along with the week number. Additionally, there are two other functions, namely weekPlus() and weekMinus(), containing variables that i ...

javascriptjqueryfunctiondatetime

Is the node certificate store limited to reading only from a predefined list of certificates?

Is there a way to add a new certificate to the list of certificates node trusts, even after some struggle? It appears that Node only trusts certificates hardcoded in its list located here: https://github.com/nodejs/node/blob/master/src/node_root_certs.h ...

javascriptnode.jssslhttps

Passing arguments to the callback function in React: a comprehensive guide

Within my react component, I have a collection of elements that I want to make clickable. When clicked, I trigger an external function and pass the item ID as an argument: render () { return ( <ul> {this.props.items.map(item => ( ...

javascriptperformancereactjs

Wait for the page content to finish loading before loading the Facebook Like Box

I am currently working on a method to delay the loading of the Facebook Like Box until after the page content has been fully loaded. My approach involves using AJAX, but I have encountered mixed results thus far. Initially, I used the following code snippe ...

jqueryajaxfacebooktimeoutfacebook-likebox

Using Javascript, when the command key is pressed, open the link in a new window

Currently, I am working on a Javascript function that opens links in a new tab only when the "command" key is pressed on an Apple computer. Here is what I have so far: $(document).on('click','a[data-id]',function(e){ if(e.ctrlKey|| ...

javascriptjquerymacos

Preventing direct URL access with Angular redirects after refreshing the page

My website allows users to manage a list of users, with editing capabilities that redirect them to the /edit-user page where form information is preloaded. However, when users refresh the page with F5, the form reloads without the preloaded information. I ...

javascriptangularroutesangular2-routingangular2-forms