的onmouseover - 添加CSS到不同的標籤比懸停標籤

我有一個菜單欄和它周圍的<div>，我在<div>的<a>，當我將鼠標懸停在<a>鼠標我想左邊框的顏色改變在<div>。我怎樣才能做到這一點？的onmouseover - 添加CSS到不同的標籤比懸停標籤

當我懸停在<a>鏈接上時，我想向<div>添加CSS樣式。

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; 
}

來源

2015-10-09 Johannes Lantz

你嘗試過這麼遠嗎？考慮提供一個你的HTML的例子。 – halfzebra

提供更多信息。 [閱讀本文]（http://stackoverflow.com/help/mcve） – Alex

做到這一點，最好的辦法是通過CSS。特別是，你可以使用僞類hover

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

也有可能做到這一點在本地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'); 
});

而在jQuery的以及

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

來源

2015-10-09 15:46:37

CSS解決方案只有在'a'與'div'相同的高度時才起作用，它是'div'中最左邊的元素， 'div'沒有填充。 –

我明白了。我們將邊框應用於鏈接元素的父元素，而不是鏈接元素本身。 –

你的意思是'.new-border'而不是'div a：hover'？ – Abhitalks

如果你想這樣做使用jQuery，然後下面的代碼將幫助你。

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

來源

2015-10-09 15:50:16

它應該是'.mouseover'，而不是'mousehover'。錯字？ – TricksfortheWeb

@Ticks.comheWeb感謝您的糾正。 –

您可以使用jQuery.parent（）來定位包含鏈接的div。

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

下面是一個例子：http://jsfiddle.net/lddz/5kdo4bcm/1/

來源

2015-10-09 15:54:14 lddz

我會建議不要使用JavaScript來實現這一目標。

這可以通過幾種不同的方式使用CSS來實現。

這裏是一個jsFiddle

如果使用HTML strucure的基本菜單：

<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>

然後你就可以添加CSS是這樣的：

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

來源

2015-10-09 16:04:29 Jackson

給DIV 2班

HTML代碼

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

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

</div>

CSS代碼

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>

來源

2015-10-09 16:17:06

的onmouseover - 添加CSS到不同的標籤比懸停標籤

回答

相關問題