0

I'm trying to apply the hover effect to two distinct elements at the same time, which means that when I mouseover one element I was the other element to be with hover effect as well. The two elements are one simple text and one icon (using font awesome). Is there any way to do this with html and css only? Or do I need to use javascript?

Thank you very much!

NFDS
  • 99
  • 1
  • 3
  • 12

2 Answers2

1

I think this is what you mean. And if it is, then it is by far the easiest way.

HTML:

<body>
    <button class="button">Click Me!</button>
    <p class="text">Hello World</p>
</body>

CSS:

.button:hover{      //To change button color
    background-color: #436242;
}

.button:hover + .text{ //To change text color
    background-color: #436242;
}

So pretty much just add the "+" then the second div.

Nicholas Ramsay
  • 465
  • 2
  • 16
0

You could do it with css as alireza told you but you need an strict html code. The easiest way by far is jqueryand quite easy to implement and understand.

With this code:

$('.element').on('hover', function(){
    $('.element').toggleClass('hover');
});

You just add the class hover to whatever element with the class element you hover. Then just add css properties to class hover:

.hover {
   color:red; 
}

JSFIDDLE

Edited: after reading your comment... if you want a different hover effect for each element then as easy as with this html:

<p class="element text">Text</p>     
<p class="element icon"></p>

you just toggleClass diferent class for element like:

$('.element').on('hover', function(){
    $('.text').toggleClass('hover1');
    $('.icon').toggleClass('hover2');
});

NEW JSFIDDLE

To add it to your project don't forget the script tag and on load function (jsfiddle does it automatically):

<script type="text/javascript">
        $(document).ready(function () {
             $('.element').on('hover', function(){
             $('.element').toggleClass('hover');
             }); 
        });
    </script>
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • Thank you for your answer! I'm not sure if I explained myself clearly, what I want is to apply the hover effect to 2 different elements, in which element has a different hover effect. For the icon logo I have a circle effect and for the text I just want it to change color. Sorry if my question wasn't clear enough. But thanks anyway :) – NFDS Nov 23 '15 at 09:26
  • I have edited my answer. check it out – Alvaro Menéndez Nov 23 '15 at 09:41
  • Thank you very much! That's exactly what I want! – NFDS Nov 24 '15 at 08:18
  • I've been trying to include that code in my own code but it doesn't seem to work, I have the css code in a different file, but have the link to it and I put the script directly in the html just to try. Is there anything I need to do more? I'm newbie working with these, so sorry if I may ask some dumb question – NFDS Nov 24 '15 at 09:14
  • Have you load jquery library? http://www.w3schools.com/jquery/jquery_get_started.asp – Alvaro Menéndez Nov 24 '15 at 09:18
  • Yes, I have it in the head section – NFDS Nov 24 '15 at 09:26
  • I edited my answer. You may have forgotten `script` tags or on load function. – Alvaro Menéndez Nov 24 '15 at 09:40
  • I added it, but the problem still persists – NFDS Nov 24 '15 at 09:49
  • I have tested it in one of my projects (outside fiddle) and it worked perfectly fine. You may have made mistake somewhere (name of classes, css, html...,) can't help anymore – Alvaro Menéndez Nov 24 '15 at 09:52
  • I also tried that and it still didn't work, have no idea why, because css is working because the icon is right, and put the script even in the head section and in a js file, but still no change... But thank you very much anyway! – NFDS Nov 24 '15 at 10:05
  • No idea mate without checking your project. Inspect your web with chrome (or simillar) tools, check if it add the class when hover, look if the inspector shows any error... – Alvaro Menéndez Nov 24 '15 at 10:11