The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function.

.msg_archivedropdown:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #FFFFFF; 
}

Since I am already utilizing jQuery, I attempted to achieve this with addClass:

function colorbubble(){
    $("archivedropdown before").addClass("msg_archivedropdownhover before");
}

The newly added class only alters the border color:

.msg_archivedropdownhover:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #DFDFDF;
}

Unfortunately, the changes are not reflecting. I have attempted multiple methods without success, including:

$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');

Neither looping through getElementsByClass worked for me. I must be overlooking something. Any hints would be greatly appreciated. Thank you.

EDIT:

This involves modifying a speech bubble where I created a triangle within the .msg_archivedropdown:before class. I aim to change the triangle's color on a mouseover event by solely adjusting the color of the .msg_archivedropdown:before class.

javascriptjquerycss

Answer №1

For a simple case like this, there's no need for jquery. You can achieve the same effect using the :hover pseudo-class.

.msg_archivedropdown {
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    position: relative;
}

.msg_archivedropdown::before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #FFFFFF; 
}

.msg_archivedropdown:hover::before {
    border-right:7px solid #DFDFDF;
}
<div class="msg_archivedropdown"></div>

Answer №2

If you're looking to modify the pseudo element :before in Jquery but are unable to do so using $('.msg_archivedropdown:before'),

Your alternative solution would be to add a class with the pseudo-element named msg_archivedropdown, and then apply it on the DOM using the toggleClass function. This way, the new class can have styles like border-color.

Here's how you can achieve this:

function colorbubble(){
    $('.msg_archivedropdown').toggleClass('beforeClass');
}
.msg_archivedropdown:before,.beforeClass:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:3px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #FFFFFF; 
     background: red
}
.beforeClass:before{
 border-right-color:blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="msg_archivedropdown">show div</div>
<button onclick="colorbubble()">change</button>

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

Tips for ensuring that flex-box children can scroll properly

I'm having trouble getting the content to scroll correctly while dealing with nested flex-box structures. Below is my CSS code: html,body,#root{ width:100%; height:100%; padding:0; margin:0; } .flex-fill{ height:100%; width:100%; ...

cssscrollflexboxoverflow

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Utilize jQuery to toggle classes on multiple elements in web development

I've been struggling to streamline this code I created for the website's navigation. As a novice in Javascript and jQuery, I would appreciate any help or advice. Thank you! Since the page doesn't reload, I have implemented the following met ...

javascriptjquery

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

I am dynamically creating multiple <a href="#"></a> elements with dynamically assigned id attributes like <a href="#" id='delete"+id+"'></a>. The IDs generated will be like delete01, delete02, .... I want to trigger a func ...

javascriptjqueryhtml

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

javascriptjqueryhtmlcssajax

KnockoutJS is not recognizing containerless if binding functionality

I was recently faced with the task of displaying a specific property only if it is defined. If the property is not defined, I needed to show a DIV element containing some instructions. Despite my efforts using $root and the bind property, I couldn't ...

javascriptnode.jsknockout.js

Integrate yaml-loader into the i18n settings of a Vue-CLI 3 project

After diving into the Vue-i18n library and exploring this tutorial, I successfully incorporated tags in json format within my project created with vue-cli. While browsing through the documentation, I noticed an example using yaml instead of json. However ...

javascriptwebpackvue.jsvue-clivue-i18n

The next-routes server.js encounters an issue: TypeError - the getRequestHandler function is not defined within the routes

I encountered an issue in my server.js file. Here is the code snippet causing the problem: const { createServer } = require('http'); const next = require('next'); const routes = require('./routes'); const app = next ({ dev: ...

javascriptnode.jsreactjsnpmnext.js

Determine which points fall within a specified radius by utilizing solely an array

I'm developing an application that utilizes Leaflet to store GPS coordinates of specific locations in a table format [lat,lng]. This functionality is only accessible from the back end. On the front end, I need to retrieve the current position and gen ...

javascriptgpsleafletmarkers

Parsing JSON data on the client side in an ASP.NET application

I am currently working with JSON data that looks like this: "Table":[ { "AF":2000.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":100.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":15000.00 "RegionNumber":2 "RegionName":"Ista ...

javascriptjson

Designing personalized plugins with Typescript in Nuxt

In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...

javascripttypescriptvue.jspluginsnuxt.js

What is the best way to denote arrays in ember-data models?

When dealing with an array in a model, is it essential to use DS.hasMany pointing to a DS.Model, even if the array elements are not actual models with IDs or endpoints? Is there a more efficient alternative? Despite using DS.hasMany with { embedded: true ...

javascriptember.jsember-data

Show only upon initial entry: > if( ! localStorage.getItem( "runOnce" ) ) { activate anchor link

My JavaScript form performs calculations, but I only want it to display the first time a visitor enters the site. I attempted to add the following code before my script: jQuery(document).ready(function($) { if( ! localStorage.getItem( "runOnce" ) ) { ...

javascriptjquery

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

Adding items dynamically to a React-Bootstrap accordion component can enhance the user experience and provide a

I am retrieving data from a database and I want to categorize them based on "item_category" and display them in a react-bootstrap accordion. Currently, my code looks like this: <Accordion> { items.map((item, index) => ...

javascriptreactjsreact-bootstrap

"Troubleshooting: Issue with React's useState and useEffect functions in conjunction with localStorage

Encountering a challenge with a React component using useState and useEffect hooks to handle state and maintain it in localStorage. The component aims to create a collapsible section with a heading and content, where the expanded state is stored in localSt ...

javascriptreactjsreact-hookslocal-storagejsx

The button text in Bootstrap 5 is black instead of white as shown in their demo

During the installation of Bootstrap 5, I encountered an issue where many of my buttons are displaying a black font instead of the expected white font as shown in the Bootstrap 5 Documentation For instance, the .btn-primary button on the official Bootstra ...

javascriptcsstwitter-bootstraplaravel-8bootstrap-5

Show Text When Clicking Within Separate DIVs

I have a set of three divs. One contains a Twitter icon, another holds a LinkedIn icon, and the last one is designated for displaying text upon clicking. My goal is to click on the Twitter icon and have corresponding text appear in the third div. Then, if ...

javascriptjquerycss

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

htmlcssweb

Set the modal-dialog to have a fixed width, but ensure that it becomes responsive and adjusts size appropriately when the screen size becomes smaller

Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size. Regardless of the screen size exceeding 1000px, I need t ...

csstwitter-bootstraptwitter-bootstrap-3