Having difficulties with applying styles to links in SCSS

I've been attempting to customize the styling of <a href=""></a> elements on my webpage. Unfortunately, the code I've tried isn't producing the desired results.

Here is the HTML:

<div class="class-name">
    The quick brown <a href="//example.com">fox</a>
</div>

And here is the SCSS:

.class-name{
    @include mixin-name(1.7rem 5rem, 1.5rem, 300, $fade-white);
}
a{
    &:link{
        color: $fade-white;
        &:visited{
            color: $white;
            text-decoration: none;
            opacity: 0.42;
        }
    }
    &:hover{
        opacity: 0.7;
        text-decoration: underline;
    }
    &:active{
        opacity: 1;
        text-decoration: none;
    }
}

Despite the CSS styling, the underline effect is not showing when hovering over the link. Additionally, the code works correctly in Safari but not in Chrome. Can anyone provide insights into what might be causing this issue?

htmlcsssassstyling

Answer №1

Just conducted a speedy test. Double check that your mixin is defined at the top of your code. Also, be sure to begin your link with text-decoration none so you can observe the change.

I opted to eliminate the :link snippet - this refers to a CSS pseudo-class that only applies if your link has not been visited. More information on this can be found here

$fade-white : #eee;
$white : #ccc;

a{
  color: $fade-white;
  text-decoration: none;

  &:visited{
    color: $white;
    text-decoration: none;
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

Answer №2

Your SCSS code contains errors, causing the browser to ignore the styles you have specified:

a {
   color: $fade-white;
   text-decoration: none;
   color: $white;

   &:visited{
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

The :visited state will take on the styles declared in the a selector

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

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

htmlcssimageflexboxalignment

Modify the original source data of an HTML table

I have written the following code: <table class="table table-hover"> <thead> <tr> <th>Status</th> <th>MPK</th> <th>Full Name</th> <th>Phone Number</th> <th>Proj ...

javascriptphphtmlcssjson

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

javascriptjquerycss

What is the purpose of including a viewport meta tag on my website if I already have CSS media queries in place?

As someone who is just starting out with building websites, I have been delving into the world of meta tags. However, even after conducting thorough research, I am still unsure about the necessity of a meta viewport tag when I am already utilizing CSS me ...

htmlcssviewport

Javascript time conflict dilemma

Currently, I am working on the add task module for my project. I need to ensure that whenever a task is added, it does not overlap with existing tasks. I have almost completed this functionality, but I have encountered a problem specifically with time over ...

javascriptjqueryjsonhtml

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate

Leverage Javascript to interact with a complex Select HTML element through automation

Having some trouble navigating a Kelley Blue Book page on Chrome using JavaScript in the Console, specifically with the "make" dropdown. My ultimate goal is to choose a make and model before proceeding by clicking the next button. Here's a snippet of ...

javascripthtmldom-eventsgetelementsbyclassname

Obtain information about a div element while scrolling

Looking to enhance my social feed page by adding a view count feature for each post. The challenge is figuring out how to keep track of views as the user scrolls down the page. Any suggestions? ...

javascriptjqueryhtml

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Exploring New Features Within my image editing software, there is a canvas where users can draw shapes. These shapes are sent to a server and added to an XML file, which is then returned to the client for display. Now, I am looking to enhance the program ...

javascripthtmlcanvasrotation

Exploring the efficiency of different CSS selectors

I am struggling with the following code: HTML: <ul class="list"> <li class="list-item"> item 1 </li> <li class="list-item list-item_active"> Active item </li> <li class="list-item"> item 3 </li> ...

performancecsscss-selectors

What is the best way to eliminate empty spaces from the container?

click here check out this image too Just getting the hang of Bootstrap. The first picture looks good, with the image as the background. But on the second picture, there are margins and a background color showing up. How can I get rid of those margins? Her ...

htmlcssbootstrap-5

Personalized cursor image using jQuery.css()

I have designed a .png image that I want to use as a custom cursor for a particular element with the class "next". Here is the code I am using, but it doesn't seem to be working. Is there anything important that I may have overlooked? $('.next& ...

jquerycss

The script initially fails to fetch the correct image height but is able to retrieve it successfully during subsequent calls

Hey there! So, I've been working on some jQuery code that's triggered by: <script type="text/javascript"> $(function () { $('#AdsLarge').adRotator({ num_li: 2, pauseTime: 50 ...

javascriptjqueryhtml

The collapsible menu does not toggle when I tap on the icon

I am currently troubleshooting an issue with this link "https://sampledemos.online/training/index.html" where the toggle feature is not functioning properly. Below are the codes I have written: <aside id="layout-menu" class="layout-menu m ...

htmljquerybootstrap-4

Javascript Variable Remains Static Despite Changing Html Content

Currently, I am facing an issue with a code where I am trying to create a variable that updates whenever the price of the product changes. Below is the code snippet: <h3 class="single-price"><span class="after currency-value"&g ...

javascripthtml

Excessive top margin on a div within a flex container is disrupting alignment

I am currently using Bootstrap 5 with flex. I am trying to align an image with some content on its right side, but when I try to align them vertically, the content on the right does not move accordingly. It seems like there might be a margin issue in the " ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Can you show me how to use Yahoo UI (JS) to simulate a click on a specific point (x, y) within an

Can someone help me with simulating a mouse down at point (X, Y) in the client area of an HTML Object using YUI? I checked the documentation here, but I'm still unclear on how to do it. ...

javascripthtmleventsyuisimulation

What is preventing me from retrieving the value of $accept_request_id?

<form method="post> <button input type="submit" id="click" class="btn btn-info " name="<?php echo$accept_request_id; ?>"></button> </form> What is preventing me from accessing the value of $accept_request_id? The code I ...

phphtml

Is there a way to dynamically apply CSS to a modal?

I have been busy creating a modal, and I wanted to share the HTML code with you. Take a look at the style tag, where I am customizing the .modal-content CSS class and .modal-dialog CSS class. <script type="text/ng-template" id="Data.html"> <styl ...

javascriptjqueryhtmlcssangularjs

Achieving consistent height for adjacent divs with AngularJS - how to do it?

Check out my code snippet here: JSFiddle I have set up my panels to be hidden initially, and I want them to expand with equal height when a button is clicked. Thank you in advance for any assistance! var app = angular.module("myApp", []).controller("myCt ...

htmlcssangularjstwitter-bootstrap-3