Adjust the color of the hyperlink within the Lightbox feature

I am currently using Lightbox Plus. I made some changes to the link colors in the Lightbox.min.css file:

.lightbox  a{ 
color: #E74C3C;
}

.lightbox a:hover{
color:white;
}


.lightboxOverlay a:{ 
color: #E74C3C;
}

.lightboxOverlay a:hover{
color:white;
}

Issue: The color change I made does not seem to affect the link color under the Lightbox image. The link color remains as #44aaee.

I searched through the source files for this color but couldn't find it. How can I successfully change the link color? Any assistance would be greatly appreciated.

csshyperlinklightbox

Answer №1

There were a total of four different states for the link:

 a:link - unvisited link
 a:visited - visited link
 a:hover - when mouse hovers over 
 a:active - when clicked

Remember to use a:link for your links

.lightboxOverlay a:link{ 
  color: red;
}

And for visited links use a:visited

.lightboxOverlay a:visited{ 
  color: yellow;
}

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

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

javascripthtmlcssvue.jsvue-component

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

I'm having an issue in my Next.JS app with importing my stylesheet in _app.js. Here is how I currently import it: import '../public/css/Index.css'; The content of Index.css looks like this: .index-container { margin: 20px auto 0; } Wha ...

javascriptcssnext.jsautoprefixer

The reload button retains functionality while being present within an Angular2 form, allowing for a seamless user experience. The

After some observation, I have realized that when a button is placed inside a form but has no connection or function related to the form, such as a back or cancel button, it unexpectedly reloads the entire page. For instance, let's consider having ...

htmlcssangular

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

<script> // utilizing only jquery $(document).ready(function(){ $('#overlay-back').fadeIn(500,function(){ $('#popup').show(); }); $(".close-image").on('click', function() { $('#po ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

When a button is clicked, load two separate pages into two distinct divs at the same time

$('#menuhome').click(function(){ $('#leftcolumncontainer').load('pages/homemenu.php'); }); the code above is used to load the home menu on the left side. Now, let's add the following: $('#menu ...

javascriptjqueryhtmlcss

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

htmlcssbootstrap-5

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

javascriptjqueryhtmlcss

"Discover the step-by-step process for displaying the menu on a WordPress

After installing the new classifieds theme on my Wordpress website, I noticed that the menu from the previous theme is still showing up. However, when I hover over the menu, it disappears and only reappears once my cursor is no longer hovering over it. ...

phphtmlcsswordpress

Using `left: initial` does not function properly in Internet Explorer

Unfortunately, the tooltip does not display correctly in IE as desired. This is how it should look (in Chrome): https://i.sstatic.net/dCM9z.png However, this is how it appears incorrectly in IE: https://i.sstatic.net/Tq6rY.png Here is my CSS code for ...

htmlcssinternet-explorer

Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading. $(window).on("load", function() { $(".loading").fadeOut("slow"); ...

javascripthtmlcsspreloader

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

How can the border of the select element be removed when it is active in select2

After examining the CSS code, I am still unable to locate the specific property that is being applied to the main element. I am currently customizing the select2 library to suit my needs. However, I am stuck in the CSS as I cannot determine which property ...

javascripthtmlcssangularjsangularjs-select2

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

htmlcsshtml5-video

Establishing a boundary by incorporating a variable into a numerical value

Is there a way to adjust the margin-bottom of an element based on the height of the next() element plus 12px? I attempted the code below but it didn't yield the desired results. $("div.entry-content").css("margin-bottom", $(this).next().outerHeight() ...

jquerycssheight

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

javascriptcssreactjsmaterial-ui

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

javascripthtmljquerycssheader

Dynamic change in the mutation observer is not causing the callback to trigger

I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...

javascriptjquerycssmutation-observers

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

cssinternet-explorerz-index