Question

I'm trying to make the #triangle-left <span> change background-color to match <a> when any of the anchors are hovered over. I've tried referencing the id and the actual span element. I've also tried the addClass (which is currently written in) and using the css selector to change border-top-color.

$(document).ready(function(){
    $('a').hover(function(){
      $("#triangle-left").addClass("changed");
    }, function(){
      $("#triangle-left").addClass("normal");
    });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #499;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
}

nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    padding: 8px 0;
  }

nav ul a:hover {
    background-color: darkgray;
  }

.changed {
  border-top-color: darkgray;
  border-left-color: transparent;
}

.normal {
  border-top-color: #444;
  border-left-color: transparent;
}

@media all and (max-width: 799px){
  nav ul {
    height: 160px;
    position: relative;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: block;
    margin-right: -.5%;
    padding: 8px 0;
  }
}
@media all and (min-width: 800px) and (max-width: 919px){
  nav ul {
    width: 800px;
    height: 40px;
    position: relative;
    margin: auto;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    width: 200px;
    padding: 8px 0;
  }
  
  #triangle-left, triangle-right {
    position: relative;
    visibility: hidden;
  }
}
@media all and (min-width: 920px){
  nav ul {
    width: 800px;
    height: 40px;
    position: relative;
    margin: auto;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    width: 200px;
    padding: 8px 0;
  }
  
  #triangle-left {
    position: absolute;
    left: calc(50% - 460px);
    width: 0;
    height: 0;
    display: block;
    border-top: 40px solid #444;
    border-left: 60px solid transparent;
  }

  #triangle-right {
    position: absolute;
    top: 0;
    right: calc(50% - 460px);
    width: 0;
    height: 0;
    display: block;
    border-top: 40px solid #444;
    border-right: 60px solid transparent;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span id="triangle-left"></span>
  <ul>
    <a href="#" class="text-center one"><li>HOME</li></a>
    <a href="#" class="text-center two"><li>PROJECTS</li></a>
    <a href="#" class="text-center one"><li>ABOUT</li></a>
    <a href="#" class="text-center two"><li>CONTACT</li></a>
  </ul>
  <span id="triangle-right"></span>
</nav>

https://codepen.io/scevans3452/pen/OgdEyx

的悬停时无法更改范围

Answer 1

这些类确实正确添加，您的Javascript代码没有任何问题。问题是要显示边框，您还需要指定border-width和border-style属性，如下所示：

.changed {
  border-style: solid;
  border-width: 1px;
  border-top-color: darkgray;
  border-left-color: transparent;
}

.normal {
  border-style: solid;
  border-width: 1px;
  border-top-color: #444;
  border-left-color: transparent;
}

以下是您的代码，已修复：https://codepen.io/anon/pen/JJxmOX

Answer 2

您永远不会删除类，只添加它们。在任何时候，您的三角形都可以是changed或changed normal。

此外，您的.changed和.normal选择器not as specific为#triangle-left和#triangle-right选择器，因此会被忽略。

话虽如此，我们确实不需要.normal类 - 我们可以添加/删除changed来指示颜色。我们只需要更具体一点：

#triangle-left.changed, #triangle-right.changed {
    ...
}

我稍微重新考虑了代码以避免重复的代码行（通过将单个函数用作hover和blur），并使用.toggleClass代替添加/删除。

$(document).ready(function(){
    $('a').hover(toggleHover, toggleHover);
});

function toggleHover() {
    $("#triangle-left").toggleClass("changed");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #499;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
}

nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    padding: 8px 0;
  }

nav ul a:hover {
    background-color: darkgray;
  }

#triangle-left.changed, triangle-right.changed {
  border-top-color: darkgray;
  border-left-color: transparent;
}

.normal {
  border-top-color: #444;
  border-left-color: transparent;
}

@media all and (max-width: 799px){
  nav ul {
    height: 160px;
    position: relative;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: block;
    margin-right: -.5%;
    padding: 8px 0;
  }
}
@media all and (min-width: 800px) and (max-width: 919px){
  nav ul {
    width: 800px;
    height: 40px;
    position: relative;
    margin: auto;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    width: 200px;
    padding: 8px 0;
  }
  
  #triangle-left, triangle-right {
    position: relative;
    visibility: hidden;
  }
}
@media all and (min-width: 920px){
  nav ul {
    width: 800px;
    height: 40px;
    position: relative;
    margin: auto;
    background-color: #444;
  }
  
  nav ul a {
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: -.5%;
    width: 200px;
    padding: 8px 0;
  }
  
  #triangle-left {
    position: absolute;
    left: calc(50% - 460px);
    width: 0;
    height: 0;
    display: block;
    border-top: 40px solid #444;
    border-left: 60px solid transparent;
  }

  #triangle-right {
    position: absolute;
    top: 0;
    right: calc(50% - 460px);
    width: 0;
    height: 0;
    display: block;
    border-top: 40px solid #444;
    border-right: 60px solid transparent;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span id="triangle-left"></span>
  <ul>
    <a href="#" class="text-center one"><li>HOME</li></a>
    <a href="#" class="text-center two"><li>PROJECTS</li></a>
    <a href="#" class="text-center one"><li>ABOUT</li></a>
    <a href="#" class="text-center two"><li>CONTACT</li></a>
  </ul>
  <span id="triangle-right"></span>
</nav>

Answer 3

你的跨度没有大小
您正在添加课程但未删除它们，因此最终会发生冲突

Answer 4

获得所需内容的简单方法是通过jquery更改css：

$('a').hover(function(){
    $("#triangle-left").css('border-top-color', 'darkgray');
}, function() {
    $("#triangle-left").css('border-top-color', '#444');
});

您当前的JavaScript也是错误的。您要将两个类添加到元素中。通过这样做，你可以添加或覆盖一些属性。

如果你想使用你当前的代码，你应该只做一个在悬停时切换的类（添加了mousein并删除了mouseout）。

在<a> with jquery

4 个答案: