Link changing other CSS with classes

css class
css multiple link styles
css link class
css hover
remove underline from link css
css link style examples
how to change text color on mouseover in html
css style links within class

Changing all same classe (count) for css effect with same and other classes.

HTML:

<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

This jQuery code not working I try to use for():

jQuery(document).ready(function($){
    totincr= $(".imgval").length;

    for(var incr=1; incr < totincr; incr++){
        $('.imghover'+incr).hover(
            function(){ 
                $('.imgval.imghover'+incr+' img').removeClass('img-gray'); 
                $('.imgval.imghover'+incr).addClass('img-text-color'); 
                $('.imgval.imghover'+incr).removeClass('no-underline'); 
                $('.imgval.imghover'+incr+' img').css("transition", "all 0.6s ease-out");
                $('.imgval.imghover'+incr).css("transition", "all 0.6s ease-out");
            },
            function(){ 
                $('.imgval.imghover'+incr+' img').addClass('img-gray');
                $('.imgval.imghover'+incr).removeClass('img-text-color'); 
                $('.imgval.imghover'+incr).addClass('no-underline'); 
            }
        );
    }      
});

this code works, but I need to create one "imghover" with number per element :

jQuery(document).ready(function($){
    $('.imghover1').hover(
        function(){ 
            $('.imgval.imghover1 img').removeClass('img-gray'); 
            $('.imgval.imghover1').addClass('img-text-color'); 
            $('.imgval.imghover1').removeClass('no-underline'); 
            $('.imgval.imghover1 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover1').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover1 img').addClass('img-gray');
            $('.imgval.imghover1').removeClass('img-text-color'); 
            $('.imgval.imghover1').addClass('no-underline'); 
        }
    );

    $('.imghover2').hover(
        function(){ 
            $('.imgval.imghover2 img').removeClass('img-gray'); 
            $('.imgval.imghover2').addClass('img-text-color'); 
            $('.imgval.imghover2').removeClass('no-underline'); 
            $('.imgval.imghover2 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover2').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover2 img').addClass('img-gray');
            $('.imgval.imghover2').removeClass('img-text-color'); 
            $('.imgval.imghover2').addClass('no-underline'); 
        }
    );       
    // and more...  
});

I try to use .each() or (for) but It's not working. Any solution?

You don't need to write on hover for each anchor tag. You can make use of start of attribute select using ^, which will pick all a element having class name start with imghover. You can use hovered anchor tag class name to find the related elements and make hover effect.

see below code

jQuery(document).ready(function($){
    $('a[class^=imghover]').hover(
        function(){ 
            var className = $(this).attr('class');
            var $image = $('.imgval.' + className + ' img');
            var $anchor = $('.imgval.' + className);
            $image.removeClass('img-gray'); 
            $anchor.addClass('img-text-color').removeClass('no-underline'); 
            $image.css("transition", "all 0.6s ease-out");
            $anchor.css("transition", "all 0.6s ease-out");
        },
        function(){ 
            var className = $(this).attr('class');
            var $image = $('.imgval.' + className + ' img');
            var $anchor = $('.imgval.' + className);
            $image.addClass('img-gray');
            $anchor.removeClass('img-text-color').addClass('no-underline'); 
        }
    );
 });
.img-gray {color: gray;}
.img-text-color {color: red;}
.no-underline {color: green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

CSS and Links, Basic CSS Link block | Setting up multiple schemes · Inheritance | Hover Guidelines These four selectors basically cover the old link, vlink and alink <​body> from a simple colour switch to a complete morph into another typeface and size. This example demonstrates how to add other styles to hyperlinks. Advanced - Create a link button with borders Another example of how to create link boxes/buttons. Change the cursor The cursor property specifies the type of cursor to display. This example demonstrates the different types of cursors (can be useful for links).

I fact not work proprely, if I have a other class inside like class="other imghover1" there not working and not work on hover when I am on the same element class="imgval imghover1"... (if you are hover the second link one two three)

I try with [class*=imghover] but same result, the content don't change if you have more classes...

How to Use Classes in CSS to Style an HTML Element – Beginner , Link icon. Copy link. Copied! Website. access_time. June 17, 2020 CSS Classes will help you stylize HTML elements quickly. However, it's only able to change one HTML element, whereas a class selector can stylize The first one contains two classes – green-text and font-36, while the other one only has one class. Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques: a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; } See the Pen Link as a Button by CSS-Tricks (@css-tricks) on CodePen. Great!

You can loop through each <a> anchor tag and check if it's attribute class contains imghover keyword or not using indexOf JS function. If classlist contains the word then next single character(1,2,3,etc.) of imghover will be added.

Here is the Demo

jQuery(document).ready(function($){
  var imgHover = 'imghover';
  var imgHoverLength = imgHover.length;
  var eleArr = [];
  
  $('a').each(function(){
    var classes = $(this).attr('class');
    if(classes.indexOf(imgHover) >= 0){
      var nextChar = classes.charAt(classes.indexOf(imgHover)+imgHover.length);
      eleArr.push('.'+imgHover+nextChar);
    }
  });
  
  var uniqueClasses = [];
  $.each(eleArr, function(i, el){
    if($.inArray(el, uniqueClasses) === -1) uniqueClasses.push(el);
  });
  var eleClass = uniqueClasses.join();

  $(eleClass).hover(
    function(){   
      var $elem = $(this);
      var $elemImg = $(this).children('img');
      $elemImg.removeClass('img-gray'); 
      $elemImg.addClass('img-text-color'); 
      $elemImg.removeClass('no-underline'); 
      $elemImg.css("transition", "all 0.6s ease-out");
      $elemImg.css("transition", "all 0.6s ease-out");
    },
    function(){ 
      var $elem = $(this);
      var $elemImg = $(this).children('img');
      $elemImg.addClass('img-gray');
      $elem.removeClass('img-text-color'); 
      $elem.addClass('no-underline'); 
    }
    );
});
.img-gray {
  color: gray;
}
.img-text-color {
  color: red;
}
.no-underline {
  text-decoration: none;
  color: #b400ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

<!-- and more... -->
<a class="other imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="other imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="other imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

CSS Link Color, And as a bonus we'll even show you how to use CSS to change the link color on Classes on the other hand, are intended to be reused throughout a webpage,  You can't unless you're using some kind of extended CSS such as SASS. However it is very reasonable to apply those two extra classes to .someDiv. If .someDiv is unique I would also choose to give it an id and referencing it in css using the id.

CSS Pseudo-classes, When you hover over the link in the example, it will change color: The :first-​child pseudo-class matches a specified element that is the first child of another  Creating the class You will be creating a new link class. In our example we'll call it ".pagelink". Locate code similar to the following in your .css file near the top: /* NON-MENU LINK COLORS */ a:link, a:visited, a:active { color: #3366FF; text-decoration: none; } a:hover { color: #006699; text-decoration: underline; }

CSS :link Selector, CSS :link Selector. ❮ Previous CSS Selectors Reference Next ❯. Example. Select and style unvisited links:. Output:After using both CSS file (style1 and style2). Note: There are two different ways to import a CSS file into another using @import url(“style2.css”); or @import “style2.css”; or directly import any CSS file or multiple CSS file in the HTML file directly within <style>@import “style1.css”; or .@import url(“style2.css”);</stlye> in head section.

:link, The :link selector is a pseudo-class that targets all unvisited anchor () elements on a page. a:link { color: aquamarine; } The example above will change. Also, you cannot add the href attribute to another type of element and  CSS Way (with jQuery changing class names) Since this is a view concern and could be considered a “state,” a popular idea is to use JavaScript only to change classes which represent states and let CSS define what the visual change actually is. We could use the class “on” to represent the swap state.

Comments
  • Why are you not simply using CSS for this? In 22 years of web development I have never needed to use a Javascript-based hover.
  • autoptimize_Uncaught TypeError: $ is not a function at autoptimize_bb4c7263ad5fe5d1e89e293823436dea.js:36
  • i don't know the exact CSS you are using but i have put colors for different css so that change effect can be seen. You can regenerate the issue on code snippet or jsfiddle using my code and then we can take a look at it
  • Uncaught TypeError: Cannot read property 'switchOffAutoHideShow' of undefined
  • usejQuery(document).ready(function($){ instead of $(document).ready(function($){
  • CSS3 HTML5 and the last of jquery