CODEWITHSUNDEEP
htmlcss
user2818003
user2818003

Reputation:

How To Select Multiple elements on hover

i was wondering how i cant create a multi hover on hover for example how can i make #b change colors when #a is hovered? only using html and css. by the way #a is a box or image

here's the HTML:

<div id="showwrap">
    <div id="leftbox">
        <ul>
            <li id="a"> <a href=""></a></li>
        </ul>
    </div>
    <div id="rightbox">
        <ul>
            <li id="b"> <a href="">Firstname Lastname</a></li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 2651

Answers (2)

porfiriopartida
porfiriopartida

Reputation: 1556

I can only recall this behavior or a similar one using labels (if you don't want any javascript), but that will NOT work with all browsers, and the most important, you would be using HTML to do behavioral stuff and not meaning as it should be.

fiddle: http://jsfiddle.net/hLtSG/

CSS

#b:hover, #bc:hover{
   color: red;
   font-weight: bold;
    border: solid 1px black;
}

HTML 

<div id="showwrap">
    <div id="leftbox"><label for="b"><img src="YOUR_IMAGE" /></label>
    </div>
    <div id="rightbox">
        <ul>
            <li> <input id="b" name="b" value="Firstname Lastname" /></li>
            <li> <a id="bc" name="bc">Firstname Lastname</a></li>
        </ul>
    </div>
</div>

Upvotes: 0

Laura Ritchey
Laura Ritchey

Reputation: 711

Tony,

The same answer to the other post you had a few days ago on this subject remains the same (How To Do Multiple Hover On List). It does look like there was one pure CSS answer but the jQuery options are much more simple.

Is there a reason that you are not willing / able to use jQuery or JavaScript? That type of situation is one of the reasons JavaScript is used. I'll keep an eye on this to hear if anyone has a pure CSS / HTML way to do this. In the meantime, you can accomplish this with jQuery or JavaScript by the following:

1.) Create a CSS class that has the properties you want upon hovering over #a.

2.) Include the following jQuery code in the associated JavaScript file (or the head of the HTML document).

$(function() {
    $("#a").hover(function() {
        $(this).addClass("hoverClass");
        $("#b").addClass("hoverClass"); 
    });
});

The hover function in jQuery solves both the MouseEnter and MouseOut functions in one step. While the mouse is hovering over the specified element, the conditions inside the function are followed. Once the mouse leaves the element, the conditions are automatically removed. Presto!

NOTE: Although I do not recommend using inline JavaScript, this can be accomplished in the HTML file if your reason for not using jQuery is due to not having the ability to have an external JavaScript file. Just include the snippet listed in my second point in the header between JavaScript script tags.

Upvotes: 1

Related Questions