如何从SVG制作透明下拉按钮?

I'm trying to set up a nav button system where you either hover or click on the SVG ( which is but it as a separate php) then there will be button drop dop, but more like transparent button. text with a clear background (no box or border). how do I do this?

展开翻译

译文

我正在尝试设置一个导航按钮系统,您可以在其中悬停或单击SVG(这是 它作为一个单独的PHP)然后会有按钮drop dop,但更像透明按钮。
文本具有清晰的背景(没有框或边框)。 我该怎么做?</ p>
</ div>

duanfu3884
duanfu3884 嗨,欢迎来到StackOverflow!为了帮助您,我们需要在问题中查看您的代码。请收集相关代码并在此处发布。有关详细信息,请参阅如何创建最小,完整和可验证的示例。另见如何询问。
9 个月之前 回复

1个回答

The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

#CSS Filters

CSS filters allow us to apply a whole bunch of cool, Photoshop-esque effects right in the browser. Filters are applied to the element after the browser renders layout and initial paint, which means they fall back gracefully. They apply to the whole element, including children. Think of a filter as a lens laid over the top of the element it's applied to.

You can change the opacity with the opacity filter opacity(<number-percentage>); .

and you can put this in a hover css tag

.navbar:hover {
  filter: opacity(<number-percentage>);
}

And here is how you make a dropdown navbar:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

here is the css to the navbar:

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问