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

Encountering an unexpected token error while using Webpack with React modules

I've been attempting to utilize the react-spin npm package, but when I try to create a bundle.js with webpack, an error occurs: Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token < You may ne ...

javascriptnpmreactjswebpack

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

javascriptpythonhtmlseleniumselenium-webdriver

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Currently facing a Javascript dilemma where data storage is essential in the following format: MainArray(Array(JavaScript Object, JavaScript Object, etc etc..), Array(JavaScript Object, JavaScript Object, etc etc..), etc etc..) The main array consists of ...

javascriptjqueryjson

Manipulate DIV elements with jQuery by selecting them based on their class names and then

Is there a way to use jQuery to eliminate all DIVs on a webpage while preserving their content that have the following specific pattern? <div class="ExternalClass85AC900AB26A481DBDC8ADAE7A02F039">....</div> Please note that these DIVs adhere ...

jqueryhtml

The Ajax request is successfully looping through multiple files, however, it is not properly sending them to the server. As a result, only one file

I have been working on an ajax request that successfully retrieves information about files, such as the number of files, their names, and looping through them. Now, I am faced with the challenge of saving these files to a local folder on my computer. I hav ...

javascriptjavajqueryajaxserverside-javascript

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

I am currently testing a component that involves intricate logic and functionality. Here is the snippet of the code I'm working on: import React, { Component } from 'react'; import { connect } from 'react-redux' import moment from ...

javascriptreactjsunit-testingjestjsenzyme

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Creating a responsive and expandable table using HTML and JavaScript

I need help with making my html table resizable in a vertical direction. The cells can overflow if there isn't enough space, so I want to allow users to stretch the table by dragging and extending the bottom edge. Can anyone provide guidance on how to ...

javascriptjqueryhtmlcss

I have been seeking the perfect solution to seamlessly incorporate ckeditor5 with comments in my AngularJS applications. Despite extensive research, I have not come across any angularjs-specific plugins for this purpose. It

import Comments from '@ckeditor/ckeditor5-comments/src/comments'; ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, Image, Comments ]; I am trying to figure out how to incorporate comments into the CKEditor5 in an AngularJS ...

javascriptangularjsckeditor4.xckeditor5

Issues with Angular toggle sorting functionality not functioning as expected

$scope.searchObject = { from: 0, hydrate: false, size: 12, sort: 'timestamp:desc' }; $scope.sort = function(a) { var ascend = a + ':' + 'asc'; var descend = a + ':' + 'desc'; if ($scope.searc ...

javascriptangularjs

Tips and tricks for displaying JSON data in Angular 2.4.10

In my Angular project, I am facing an issue while trying to display specific JSON data instead of the entire JSON object. Scenario 1 : import { Component, OnInit } from '@angular/core'; import { HttpService } from 'app/http.service'; ...

javascriptjsonangulartypescript

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Find the nearest element with a specific class using jQuery

I am currently using jQuery version 1.12.4 for the purpose of retrieving the value from the closest element with a specific class selector. Unfortunately, I am encountering difficulty in selecting the closest element as desired. $(function() { $("[cla ...

javascriptjquery

How can you ensure that the right data types are sent through ajax requests?

My goal is to ensure the server receives data in the correct data type when using ajax. For example, I want boolean values to be received as actual booleans, integers as integers (not strings), and so on. I attempted a solution where I sent the data as JS ...

phpjqueryajax

What is the proper way to format lengthy lines in Twig templates while adhering to coding standards?

In my templates, I have the following code snippet for generating routes with parameters: <a class="btn btn-block btn-abcd" href="{{ path( 'auth.login', { 'type': constant('User::TYPE_CANDIDATE'), & ...

phphtmlsymfonycoding-styletwig

Expand and collapse divs using jQuery when a JavaScript do_PostBack link is clicked

Currently, I am in the process of developing a website called TheDigitalScale. One particular feature on the site involves using jQuery to create an expanding div that opens when clicked and closes with another click. <script type="text/javascript"> ...

javascriptjqueryasp.net

Storing blank information into a Mongodb database with Node.js and HTML

Can someone please assist me with solving this problem? const express=require("express"); const app=express(); const bodyparser=require("body-parser"); const cors=require("cors"); const mongoose=require("mongoose"); ...

javascriptexpressmongoosexpathnodejs-server

What is the best way to integrate an image gallery with twitter bootstrap?

I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...

cssimagetwitter-bootstrap

What is the best way to conduct a Javascript test using Jasmine?

I'm encountering an issue with testing this JavaScript code: $("#ShootBtn").on('click', () => foo.testFunc()); var foo = { testFunc: function() { hub.server.shoot(true, username, gameCode); } } For my testing framework, ...

javascriptjsonjasminekarma-jasmine

What is the process for assigning an element to a specific URL ID?

Imagine having an array of objects structured like this: [{ details: {id: 7}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: 8}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: ...

javascriptreactjs