悬停按钮并使用CSS

时间：2017-02-17 14:15:37

标签： css svg hover svg-filters

我有一个阴影效果，我使用SVG滤镜来保持灵活性，可以使用多种轮廓变化。我在<use> - 元素上应用此过滤器，并希望在用户悬停父母按钮时交换此过滤器。

交流在这里似乎很重要，因为应用＆＃34; new＆＃34;悬停过滤适用于所有主流浏览器。但是将它从给定的过滤器更改为另一个过滤器似乎只适用于Edge？

CodePen示例应该为事物带来光明： http://codepen.io/katerlouis/pen/pRmyoR

enter image description here

我想要的是使用CSS在悬停时切换滤镜。 请不要使用JavaScript解决方案。

奇怪的是，有时单击按钮会导致应用应该悬停的过滤器。

我在2013年末MBPr 15＆＃39;＆＃39;运行El Capitan 10.11.6。 还在办公室的其他Mac上进行了测试，结果相同。 在Edge 14（Browserstacks Chromeplugin）中，按钮工作正常。 Firefox（51），Chrome（56）和Safari（9.1.3）失败。

3 个答案:

答案 0 :(得分：0)

这是一种解决方法。

  1. 绝对定位按钮（即一个在另一个之上）
  2. 将按钮包裹在容器中（<div id="t">）
  3. 使用容器悬停.t:hover事件隐藏所需的按钮。

    4. 示例： 

    body {
  padding: 40px;
  background: #003A63;
  color: white;
}

button {
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.button1 .outline {
  fill: white;
  filter: url(#button-neutral);
}

.button1 .fill {
  fill: #FFED00;
}

.button1:hover .outline {
  filter: url(#button-hover);
}

.button2 .outline {
  fill: white;
}

.button2 .fill {
  fill: #CD1719;
}

.button2:hover .outline {
  filter: url(#button-hover);
}

.t:hover .button1 {
  z-index: -1;
}

.button1,
.button12 {
  position: absolute;
}
    Button with filter on both
<div class="t">
  <button class="button1">
	<svg>
		<use class="fill" xlink:href="#button-large-fill" />
		<use class="outline" xlink:href="#button-large-outline1" />
	</svg>
</button>

  <button class="button2">
	<svg>
		<use class="fill" xlink:href="#button-large-fill" />
		<use class="outline" xlink:href="#button-large-outline1" />
	</svg>
</button>
</div>

<svg version="1.1" class="hidden-svg">
	<defs>
		<filter id="button-neutral">

		    <!-- Um den weißen rahmen des buttons nach oben zu schieben mit dem filter -->
		    <feOffset in="SourceGraphic" dx="0" dy="-3" result="sourceCopy" />

		    <feOffset in="SourceAlpha" dx="0" dy="1" result="innenSchatten" />

		    <feFlood flood-color="gray" flood-opacity="0.8" result="innenSchatten-gefaerbt" />
		    <feComposite in="innenSchatten-gefaerbt" in2="innenSchatten" operator="in" result="final" />

		    <feBlend in="final" in2="" mode="multiply" /> 


			<feFlood flood-color="green" result="lol" />
			<feComposite in="lol" in2="SourceAlpha" operator="atop" result="lol2" /> 
		    

		    <!-- Put everything together. Blur then graphic. -->
			<feMerge>
				<feMergeNode in="final"/>
				<feMergeNode in="sourceCopy" />
			</feMerge>
		</filter>


		<filter id="button-hover">

		    <!-- Um den weißen rahmen des buttons nach oben zu schieben mit dem filter -->
		    <feOffset in="SourceGraphic" dx="0" dy="0" result="sourceCopy" />

		    <feOffset in="SourceAlpha" dx="0" dy="2" result="innenSchatten" />

		    <feFlood flood-color="gray" flood-opacity="1" result="innenSchatten-gefaerbt" />
		    <feComposite in="innenSchatten-gefaerbt" in2="innenSchatten" operator="in" result="final" />

		    <feBlend in="final" in2="" mode="multiply" /> 


			<feFlood flood-color="green" result="lol" />
			<feComposite in="lol" in2="SourceAlpha" operator="atop" result="lol2" /> 
		    

		    <!-- Put everything together. Blur then graphic. -->
			<feMerge>
				<feMergeNode in="final"/>
				<feMergeNode in="sourceCopy" />
			</feMerge>
		</filter>

	</defs>


	<symbol id="button-large-outline1" viewBox="0 0 255 48.9">

		<path d="M252.7,15.6c-1.3-3.2-3.3-6.1-5.8-8.4c-2.3-2.2-5.1-3.8-8-4.9c-0.4-0.1-0.7-0.3-1.1-0.4l-1.1-0.3c-0.8-0.2-1.5-0.3-2.3-0.4
				c-0.8-0.1-1.6-0.2-2.4-0.2c-0.8,0-1.5,0-2.2,0l-28.3,0.2c-2-0.1-4-0.2-6-0.2c-5.7-0.2-11.4-0.4-17.1-0.5l-8.6-0.2L161.2,0
				c-11.4-0.1-22.8,0-34.2,0.2C104.1,0.7,81.3,1.8,58.4,2C47,2.1,35.6,2.1,24.2,2c-0.7,0-1.4,0-2.2,0c-0.8,0-1.5,0-2.3,0.2
				c-0.8,0.1-1.5,0.2-2.2,0.4l-1.1,0.3c-0.4,0.1-0.7,0.2-1.1,0.4c-2.9,1-5.5,2.5-7.8,4.6c-2.3,2-4.1,4.6-5.4,7.4c-1.3,2.8-2,5.9-2.1,9
				c-0.2,6.2,2.3,12.6,6.9,17c0.3,0.3,0.6,0.5,0.9,0.8c4.2,4.1,9.9,6.7,16.2,6.7h51.1c17.3,0.2,34.6,0.3,51.8,0.2l17.1-0.1
				c3.1,0,6.2-0.1,9.3-0.1H232c12.7,0,23-10.3,23-23C255,22.1,254.1,18.7,252.7,15.6z M5,25.6c0-10.5,8.5-19,19-19h208
				c5.1,0,9.7,2,13.1,5.3c2.9,3.4,4.5,7.8,4.5,12.2c0,5.1-2.2,10-6,13.4c-1.8,1.7-4,3-6.4,3.9c-0.3,0.1-0.6,0.2-0.9,0.3l-0.9,0.2
				c-0.6,0.2-1.2,0.3-1.8,0.3c-0.6,0.1-1.2,0.1-1.9,0.2c-0.3,0-0.6,0-1,0l-1.1,0l-34.2-0.3l-20.9-0.1l-4.8-0.1l-8.6-0.2
				c-5.7-0.1-11.4-0.2-17.1-0.2l-17.1-0.1c-22.8-0.1-45.7,0.1-68.5,0.4C47,42,35.6,42.1,24.2,42.3l-1.1,0c-0.4,0-0.6,0-1,0
				c-0.6,0-1.2,0-1.9-0.1c-0.6-0.1-1.2-0.1-1.8-0.3l-0.9-0.2c-0.3-0.1-0.6-0.2-0.9-0.3c-2.4-0.8-4.6-2-6.5-3.7
				c-1.4-1.2-2.5-2.6-3.5-4.1C5.6,31.1,5,28.5,5,25.6z" />

	</symbol>
	
	<symbol id="button-large-fill" viewBox="0 0 255 48.9">
		<path class="st0" d="M0.9,23.6c0-11.6,9.4-21,21-21h208c11.6,0,21,9.4,21,21c0,11.6-9.4,21-21,21h-208C10.3,44.6,0.9,35.2,0.9,23.6z
				    	"/>
	</symbol>

</svg>

答案 1 :(得分：0)

从技术上讲，在SVG 1.1中，过滤器不是可以应用于SVG子元素的CSS属性，因此这种样式根本不起作用 - 没关系悬停。各种浏览器正在逐步实现SVG 2行为，这扩展了CSS样式。

解决方法 - 将样式类应用于SVG周围的包装器div，然后在悬停时过滤器切换就好了。见下文：

＆＃13;
＆＃13; 
#shapes {
  filter: url(#firstfilter);
}

#shapes:hover {
  filter: url(#secondfilter);
}
＆＃13; 
<div id="shapes">
<svg>
  <defs>
    <filter id="firstfilter">
      <feColorMatrix type="matrix" values=".2 .2 .2 0 0 
                                           0 0 0 0 0 
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>
    </filter>
      
     <filter id="secondfilter">
      <feGaussianBlur stdDeviation="2"/>
    </filter>   
      
  </defs>
    
  <path class="st0" d="M0.9,23.6c0-11.6,9.4-21,21-21h208c11.6,0,21,9.4,21,21c0,11.6-9.4,21-21,21h-208C10.3,44.6,0.9,35.2,0.9,23.6z" fill="blue"/>
  
  <path d="M252.7,15.6c-1.3-3.2-3.3-6.1-5.8-8.4c-2.3-2.2-5.1-3.8-8-4.9c-0.4-0.1-0.7-0.3-1.1-0.4l-1.1-0.3c-0.8-0.2-1.5-0.3-2.3-0.4
				c-0.8-0.1-1.6-0.2-2.4-0.2c-0.8,0-1.5,0-2.2,0l-28.3,0.2c-2-0.1-4-0.2-6-0.2c-5.7-0.2-11.4-0.4-17.1-0.5l-8.6-0.2L161.2,0
				c-11.4-0.1-22.8,0-34.2,0.2C104.1,0.7,81.3,1.8,58.4,2C47,2.1,35.6,2.1,24.2,2c-0.7,0-1.4,0-2.2,0c-0.8,0-1.5,0-2.3,0.2
				c-0.8,0.1-1.5,0.2-2.2,0.4l-1.1,0.3c-0.4,0.1-0.7,0.2-1.1,0.4c-2.9,1-5.5,2.5-7.8,4.6c-2.3,2-4.1,4.6-5.4,7.4c-1.3,2.8-2,5.9-2.1,9
				c-0.2,6.2,2.3,12.6,6.9,17c0.3,0.3,0.6,0.5,0.9,0.8c4.2,4.1,9.9,6.7,16.2,6.7h51.1c17.3,0.2,34.6,0.3,51.8,0.2l17.1-0.1
				c3.1,0,6.2-0.1,9.3-0.1H232c12.7,0,23-10.3,23-23C255,22.1,254.1,18.7,252.7,15.6z M5,25.6c0-10.5,8.5-19,19-19h208
				c5.1,0,9.7,2,13.1,5.3c2.9,3.4,4.5,7.8,4.5,12.2c0,5.1-2.2,10-6,13.4c-1.8,1.7-4,3-6.4,3.9c-0.3,0.1-0.6,0.2-0.9,0.3l-0.9,0.2
				c-0.6,0.2-1.2,0.3-1.8,0.3c-0.6,0.1-1.2,0.1-1.9,0.2c-0.3,0-0.6,0-1,0l-1.1,0l-34.2-0.3l-20.9-0.1l-4.8-0.1l-8.6-0.2
				c-5.7-0.1-11.4-0.2-17.1-0.2l-17.1-0.1c-22.8-0.1-45.7,0.1-68.5,0.4C47,42,35.6,42.1,24.2,42.3l-1.1,0c-0.4,0-0.6,0-1,0
				c-0.6,0-1.2,0-1.9-0.1c-0.6-0.1-1.2-0.1-1.8-0.3l-0.9-0.2c-0.3-0.1-0.6-0.2-0.9-0.3c-2.4-0.8-4.6-2-6.5-3.7
				c-1.4-1.2-2.5-2.6-3.5-4.1C5.6,31.1,5,28.5,5,25.6z" fill="red" />	

</svg>
      
 </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

看看这个workaround on CodePen。它使用悬浮状态的不透明度。我需要处理我的过滤器中的透明度，以便稍微修改它。我还将样式移动到外部css表。我喜欢这样做比做其他div换行更好，因为悬停状态可以应用于多边形而不是矩形。

<style>
    #group {
        cursor: pointer;
    }
    #group #poly-off {
        opacity: 1;
    }
    #group #poly-on {
        opacity: 0;
    }
    #group:hover #poly-off {
        opacity: 0;
    }
    #group:hover #poly-on {
        opacity: 1;
    }
</style>

<svg>
    <defs>
        <filter id="off">
        <filter id="on">
        <path d="..." id="path"/>
    </defs>
    <g id="group">
        <use id="poly-off" filter="url(#off)" xlink:href="#path"/>
        <use id="poly-on" filter="url(#on)" xlink:href="#path"/>
        <use fill-opacity="0.5" fill="#ff0000" xlink:href="#path"/>
    </g>
</svg>
相关问题
最新问题