2

For practice and training CSS im trying to do something like: enter image description here

In other words, I'm trying something like this: when I hover over third paragraph, second paragraph needs to get color like on picture.

I'm trying with pseudo-classes :hover and :before (or :after) with content attribute set to "", setting background to #E7A51B and opacity to 0.3 but It doesn't work.

HTML need to be like this:

<body>
    <div class="app">
        <p> First paragraph </p>
        <div class="active">
            <p> Second paragraph </p>
        </div>
        <br>
        <div>
            <p> Third paragraph </p>
        </div>
    </div>
</body>

EDIT: Thanks everyone on comments. Reading your comments I get idea to ask that is it possible some more generic approach, something like:
If I hover over element with class="foo1" background of element with class="foo2" get changed?

mishik
  • 9,973
  • 9
  • 45
  • 67
Srle
  • 10,366
  • 8
  • 34
  • 63

5 Answers5

3

current CSS (Selectors Level 3)

With the current CSS standard, unfortunately what you are trying is not possible. However, what is possible at the moment?

Given the following markup:

<div class="app">
    <p> First paragraph </p>
    <p> Second paragraph </p>
    <p> Third paragraph </p>
</div>

You can target elements that are on the same level (same parent) and follow your initial element you interact with (e.g. :hover). → Demo

/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
    color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
    color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
    color:green;
}

the future (Selectors Level 4)

Selectors Level 4 will (most likely) bring two exciting new feature which can achieve, what you actually try to do:

1) The - what I would call it - subject indicator - it let's you determine, which element of the compound selector you want to target.

!OL > LI:only-child

would target all ordered lists with only have one list element (looks simple, but is not possible with current css).

2) the reference combinator:

label:hover /for/ input

would target an input element, when the label which is referencing it via it's for attribute is hovered.

At the moment this is not supported by any browser yet, but you see, we can be excited what awaits us in the near future of css;)

Christoph
  • 50,121
  • 21
  • 99
  • 128
2

The :hover method in CSS will only work if you want to hover over an element and change the color of that specific element, it will not work to change a separate one. In other words, you will need to do some simple JQuery. If you're not familiar with JQuery, don't worry, I'll walk you through the steps you'll need. If you're familiar with Jquery and already have the library, skip to step 3 and I'll provide you with the exact code that will make it work. This looks extremely long and painful but that's just because I'm trying to be as thorough as possible. It is actually very simple

Step 1: If you don't know what JQuery is, it is JavaScript that has been rewritten in an easier (in my opinion) syntax. In order for the JQuery to work however, you will need to download the library (syntax) for free at jquery.com. When you get to the website, click the download tab and then download the compressed, production version of JQuery. When you click that to download it, a page opens up with all the code. Copy it all and paste it into your text editor and save it with a .js extension. ex: jquery-library.js. Tip: make sure it is in the same folder as all of your other html and css documents that you're using.

Step 2: Link your html with the Jquery library you downloaded like this:

<head>    
<script type="text/javascript" src="the name of your jquery library file.js"></script>
</head>

Step 3: Create a new file in your text editor with a .js extension. ex: background-color.js. You will also need to link this with your html page. Go to your html page and in the < head > section right underneath the first < script > tag, type:

<script type="text/javascript" src="the name of your javascript file.js"></script>

Your < head > section in the html should now look like this:

<script src="the name of your jquery library file.js"></script>
<script src="the name of your javascript file.js"></script>

Step 4: You will need to make a few simple changes to your html first. The second and third < p > elements both need classes so that the JQuery can identify them:

<div class="app">
    <p> First paragraph </p>
    <div class="active">
        <p class="second"> Second paragraph </p>
    </div>
    <br>
    <div>
        <p class="third"> Third paragraph </p>
    </div>

Step 5: Now for the JQuery. It is okay if you don't understand the syntax, just copy and paste this into your .js document: Tip: I added comments to explain each string as much as possible. Anything on a line after a // is a comment.

$(document).ready(function(){ // <-- this string tells the browser to perform the following action once the page has fully loaded                      
    $(".third").mouseenter(function(){
    $(".second").css("background-color", "#9CF"); // change this css color to whatever background color you want
     }); // when the mouse enters the class "third", the background color of the class "second"
                                                           // changes to #9CF
    $(".third").mouseleave(function(){
    $(".second").css("background-color", "#FFF"); //change this css color to whatever your default background is
     }); // when the mouse leaves the class "third", the background color of the class "second"
         // changes back to default

});

I hope this helped. Let me know if something doesn't work, but I tested it in safari and firefox and it is extremely basic JQuery so it should work anywhere. Keep in mind that on a mobile device, you can't hover, so try not to make it an essential part of your website.

samrap
  • 5,595
  • 5
  • 31
  • 56
  • This works, but it is really heavy on DOM traversal. A function is probably needed that is more lightweight and useable – Cody Guldner Jul 01 '13 at 05:49
  • You also don't need to give a complete tutorial on how to include jQuery in the file. \ – Cody Guldner Jul 01 '13 at 05:56
  • @CodyGuldner wasn't sure if this person knew about JQuery so I was just trying to help. I have a question I'm waiting to get answered so I had nothing better to do...btw I liked your idea on using the .prev() method. Didn't even think about that. – samrap Jul 01 '13 at 06:06
  • Well it is good that you were thinking of the user. Thank you for taking the time to write an in depth answer – Cody Guldner Jul 01 '13 at 06:07
1

Here is my solution

My goal was to create a solution that wouldn't require any work on the HTML of the page. I was also trying to create a solution that would be applicable in various scenarios. To do this, I have to use the .prev() method.

$("div p").on("mouseenter", function () {
    $(this).prev().css("background-color", "red");
});
$("div p").on("mouseleave", function () {
    $(this).prev().css("background-color", "inherit");
});
Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
0

here is my new code with some jquery

in your html I added class last

http://jsfiddle.net/K4RFX/1/

$('.last').mouseover(function() {
$('.active p').css('background','#f00');
});
$('.last').mouseout(function() {
$('.active p').css('background','none');
});


<body>
    <div class="app">
        <p> First paragraf </p>
        <div class="active">
            <p> Second paragraf </p>
        </div>
        <br>
        <div class="last">
            <p> Third paragraf </p>
        </div>
    </div>
</body>
Bugaloo
  • 1,671
  • 3
  • 16
  • 21
0

Unfortunately, the modern CSS doesn't have a selector like 'previous element'. We can only use some combinations of hover effects on parent and children elements, like in this demo:

CSS

  .wrapper:hover p:first-child {
        background: red;    
    }
    .wrapper p:first-child:hover {
        background: none;    
    }

  HTML

<div class="wrapper">
    <p>The 2nd parapraph</p>
    <p>The 3rd parapraph</p>
</div>
nulltoken
  • 64,429
  • 20
  • 138
  • 130
Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
  • Nice workaround which might work in some limited situations with few css, but imo not really feasible http://jsfiddle.net/MVkFV/3/ – Christoph Jul 01 '13 at 08:53