Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Hovering over text with a class changes color of all text with same class - jQuery

Hovering over text with a class changes color of all text with same class - jQuery

Scheduled Pinned Locked Moved General Discussion
3 Posts 1 Posters 459 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • DMBD Offline
    DMBD Offline
    DMB
    wrote on last edited by
    #1

    Hi @Armin-Unruh , hope you're well :smile:

    I'm trying to write some jQuery so that whenever i hover over a class 'colorbutton' it chnages the color of all text with the same class on the page.

    I found a fiddle which does basically this (ignore the two different things i just want to do it to one class) but I cant figure out how to adapt it to work with Lay as i'm not very experienced with javascript - trying to learn.

    function highlightAllOnMouseover(className){
    $(className).mouseover(function() {
    $(className).css("opacity", 0.4);
    $(className).css("opacity", 1);
    }).mouseleave(function() {
    $(className).css("opacity", 0.4);
    });
    }
    highlightAllOnMouseover(".thing1");

    Any ideas for this?

    Heres the fiddle
    http://jsfiddle.net/aZXRM/

    DMBD 1 Reply Last reply
    0
    • DMBD DMB

      Hi @Armin-Unruh , hope you're well :smile:

      I'm trying to write some jQuery so that whenever i hover over a class 'colorbutton' it chnages the color of all text with the same class on the page.

      I found a fiddle which does basically this (ignore the two different things i just want to do it to one class) but I cant figure out how to adapt it to work with Lay as i'm not very experienced with javascript - trying to learn.

      function highlightAllOnMouseover(className){
      $(className).mouseover(function() {
      $(className).css("opacity", 0.4);
      $(className).css("opacity", 1);
      }).mouseleave(function() {
      $(className).css("opacity", 0.4);
      });
      }
      highlightAllOnMouseover(".thing1");

      Any ideas for this?

      Heres the fiddle
      http://jsfiddle.net/aZXRM/

      DMBD Offline
      DMBD Offline
      DMB
      wrote on last edited by
      #2

      @Armin-Unruh Actually ive got this code which seems to be right but perhaps not written properly?

      <script>
      jQuery(document).ready(function(){
      jQuery('.text1 h1').hover(
      function() {jQuery('.text1 h1').css({"color":"blue"});
      },function() {jQuery('.text1 h1').removeAttr('style');});
      </script>

      1 Reply Last reply
      0
      • DMBD Offline
        DMBD Offline
        DMB
        wrote on last edited by
        #3

        Actually its ok ive worked it out!

        1 Reply Last reply
        0
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes


        I also code custom websites or custom Lay features.
        šŸ’æ Email me here: šŸ’æ
        info@laytheme.com

        Before you post:
        1. When using a WordPress Cache plugin, disable it or clear your cache.
        2. Update Lay Theme and all Lay Theme Addons
        3. Disable all Plugins
        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

        This often solves issues you might run into

        When you post:
        1. Post a link to where the problem is
        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
        Online Users
        Z
        zlay
        A
        Aleksandar
        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
        laytheme.com
        • Login

        • Don't have an account? Register

        • Login or register to search.
        • First post
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search