创建特定形状的菜单悬停背景颜色

Question

我有一个下拉导航菜单，我想在悬停时为其子菜单添加背景颜色，如下面的屏幕截图所示，如果菜单文本很长或很短，它应该正确设置。但我不知道如何实现这个悬停。

Answer 1

您可以尝试为this使用每个列表项的伪元素。

1, z, baloney

请注意，理想情况下，您必须避免仅用于演示目的的幻数。

Answer 2

多年来，有许多技巧和黑客可以实现这一目标。有些比其他更好，取决于你所追求的形状。有些人在元素的特定边框上使用了CSS边框颜色和厚度，有些则使用图像来获得效果。

使用CSS3，以及您正在展示的形状，我认为您希望使用＆＃34; perspective＆＃34;或许＆＃34;倾斜＆＃34;甚至＆＃34;旋转＆＃34;。

这里列出了CSS3可以在这方面提供帮助的各种方式：http://www.w3schools.com/css/css3_2dtransforms.asp

您可以在此处阅读有关观点的所有内容：https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

这是一个更简单的例子，可能是开始使用：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1

这里有一个简单的例子（你还需要对这些数字大惊小怪才能让它更精确）：

＆＃13;

＆＃13;

window.addEventListener("DOMContentLoaded", function(){

  var divs = document.querySelectorAll(".menuItem");
  
  for(var i = 0; i < divs.length; ++i){
  
     divs[i].addEventListener("mouseover", function(){
       this.parentElement.children[0].style.backgroundColor = "#090";
       this.parentElement.children[1].style.backgroundColor = "#090";       
     });  
    
     divs[i].addEventListener("mouseout", function(){
       this.parentElement.children[0].style.backgroundColor = "#fff";
       this.parentElement.children[1].style.backgroundColor = "#fff";       
     });      
  }

  
});

＆＃13;

div {
    width: 100px;
    float:left;
}

#menuItem { width: 300px; }

#mainDiv {

 height:28px;
 width:120px;
 padding-left:5px;
 padding-top:10px;
}

#skewedDiv {
    width: 30px;
  
    -ms-transform: skewX(-25deg) translate(1px, 5px) rotate(-25deg); /* IE 9 */
    -webkit-transform: skewX(-25deg) translate(1px, 5px) rotate(-25deg); /* Safari */
    transform: skewX(-25deg) translate(1px, 5px) rotate(-25deg); /* Standard syntax */
    height: 40px;
}

＆＃13;

<div id="menuItem">
  <div class="menuItem" id="skewedDiv"></div>
  <div class="menuItem" id="mainDiv">Fire Solution</div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：使用供应商前缀对于旧版浏览器很有用，但此时对CSS转换有很强的支持。