CODEWITHSUNDEEP
javascriptcss
Johannes Lantz
Johannes Lantz

Reputation: 55

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?

I want to add a CSS-style to the <div> when I hover on the <a> link.

Html:

<div id="meny" class="meny">
<a href="index.html" id="home" class="linksM">Home</a>
</div>

Css:

    a.linksM{
        color: black;
        display: inline-block;
        padding: 10px;
        margin: 0px;
        font-size: 13pt;
        font-family: "vandetta", "arial", sans-seriff;
        font-weight: bold;      
}

div.meny{
        border: solid 4px;
        border-color: #82b919;
        background-color: #82b919;
        border-radius: 5px;
        border-bottom-color: #006600;

        border-top-color:  #006600;
        border-top: 0px;

    }
    #home:hover{
        border-left-color: #006600;
}

Upvotes: 0

Views: 104

Answers (5)

Jakub Mazurkiewicz
Jakub Mazurkiewicz

Reputation: 67

give the div 2 classes

HTML code 

 <div id="link-container" class="normal">

     <a href="#" id="link">Link Name</a>

 </div>

CSS code 

 div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}


div.hover {
border-left: 5px solid purple;
margin: 0;
}

#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}

#link:hover {
font-weight: 900;
text-decoration: underline;
}

Javascript/jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <script>

    $(document).ready(function() {

        $('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching

        $('#link').on('mouseover', function(){

            $('#link-container').addClass('hover')}).on('mouseout', function() {

            $('#link-container').removeClass('hover')

        });

    });



    </script>

Upvotes: 0

Jackson
Jackson

Reputation: 3518

I would recommend against using javascript to achieve this.

This can be achieved using CSS in several different ways.

Here is a jsFiddle

If you use a HTML strucure for a basic menu:

<nav>
    <ul>
        <li>
            <a href='#'>Link 1</a>
        </li>
        <li>
            <a href='#'>Link 2</a>
        </li>
        <li>
            <a href='#'>Link 3</a>
        </li>
    </ul>
</nav>

Then you can add CSS like this:

nav a {
    text-decoration: none;
    display: block;
    padding: 6px 10px;
    border-left: 2px solid transparent;
}
nav a:hover {
    border-left: 2px solid red;
}

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26444

The best way to do this is via CSS. In particular, you can use the pseudoclass hover

div a:hover {
    border-left: 1px solid blue;
}

It's also possible to do this in native JavaScript

var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
    this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
    this.parentNode.classList.remove('new-border');
});

And in jQuery as well

$("div a").on("mouseover", function() {
    $(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
    $(this).parent().removeClass("new-border");
});

Upvotes: 3

lddz
lddz

Reputation: 302

You can use jQuery .parent() to target the div containing your link.

$('a').hover(function() {
    $(this).parent().toggleClass('green-border');
});

Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/

Upvotes: 0

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

If you want to do it using jQuery then following code will help you.

$(document).ready(function(){
  $("div a").mouseover(function(){
    $("div").addClass("classname");
  });
  $("div a").mouseout(function(){
    $("div").removeClass("classname");
  });
});

Upvotes: 0

Related Questions