仅使用CSS将悬停效果应用于图像的非透明部分

时间：2016-10-22 07:03:04

标签： html css image svg hover

问题：

确保CSS悬停效果仅应用于不透明的复杂图像部分的最简单/最佳方法是什么？

我有一个svg，其中的部件是透明的，但是，悬停效果将应用于整个svg的矩形区域。

代码段：

#bear {
  width: 150px;
  background-color: red;
}
#bear:hover + #bearBox {
  background: green;
}
#bearBox {
  position: absolute;
  background: red;
}
<img id="bear" src="http://www.clipartbest.com/cliparts/4Tb/o5d/4Tbo5dxEc.svg">
<p id="bearBox">Touching Bear</p>

在上面的代码段中，要求是:hover状态仅通过悬停熊来触发，而不是整个img元素（背景设置为红色以用于说明目的）< / em>的

CodePen： http://codepen.io/cbbcbail/pen/kkVPqK

5 个答案:

答案 0 :(得分：5)

如何仅在hover的内部元素上触发<svg>事件，而不是在SVG视口本身上？

您可以通过多种方式嵌入SVG，其中包括：

  • img
  • object
  • svg
  • css background

他们的优缺点不在此答案的范围内，但我们会在处理img 中的互动时指出使用svg标记，例如作为悬停事件，不是一个好的选择。

即使将<svg>用作源，它也会像栅格一样呈现，因为它位于<img>源属性中。您只能将事件处理程序附加到整个＆＃34;矩形＆＃34;。

要实现此目的，请使用<svg>或<object>元素。

在元素内部，使用组标记<g>来包装相关元素，并为每个集合附加一个事件监听器。

简化示例：

而不是：

<img id="bear" src="http://www.clipartbest.com/cliparts/4Tb/o5d/4Tbo5dxEc.svg">

这样做：

<svg id="bear">
  <g class="selector-that-triggers-hover">
    <path></path>
    <!-- n paths... -->
  </g>
  <!-- n groups... -->
</svg>

代码段：

＆＃13;
＆＃13; 
const inner = document.querySelector('.inner');

const box = document.getElementById('bearBox');

inner.addEventListener('mouseenter', () => box.classList.add('hovered'));

inner.addEventListener('mouseleave', () => box.classList.remove('hovered'));
＆＃13; 
#bear { width: 150px; }

#bearBox.hovered { background: green; }

#bearBox { position: absolute; background: red; }
＆＃13; 
<svg viewBox="0 0 377.428 431.627" id="bear"><title>Bear</title><g class="inner"><path class="outline" d="M123.754 16.501c-9.792-6.84-19.044-10.26-28.044-10.404-9.108-.144-18.648 4.14-25.848 9.648-7.344 5.436-13.788 14.004-17.1 23.22-3.276 9.18-4.464 22.788-2.196 31.536 2.16 8.64 7.272 15.264 15.336 20.16-1.62 7.164-2.592 13.392-3.06 18.828-.576 5.436-.756 7.236.432 13.572 1.224 6.3 3.564 14.004 7.02 23.688-16.308 19.584-29.412 37.404-40.284 54.288-10.908 16.668-19.404 29.088-24.12 46.008-4.716 17.027-8.424 43.201-3.924 55.188 4.536 11.736 18.324 15.553 30.672 15.336 12.348-.322 26.136-6.012 42.48-17.063-5.832 6.875-9.828 15.803-12.276 27.359-2.484 11.557-5.58 28.477-2.196 41.184 3.312 12.529 8.676 23.545 22.356 33.732 13.86 10.115 41.868 24.48 59.58 26.713 17.496 2.051 35.82-6.373 45.108-14.006 9.071-7.775 9-20.051 9.647-31.967.576-12.023-1.512-24.984-6.12-39.457h12.276c-2.16 9.938-2.268 19.549-.468 29.377 1.8 9.791 5.651 19.943 11.412 28.908 5.688 8.82 11.483 18.828 22.788 23.652 11.34 4.68 31.14 7.344 44.243 4.391 12.925-3.131 24.841-12.852 32.832-22.787 7.668-10.188 11.881-23.617 14.04-36.793 2.124-13.211 1.044-30.131-.899-41.184-2.052-11.088-5.652-17.424-10.8-24.299-5.221-6.949-11.736-12.385-19.944-16.74 10.836 2.664 21.563 4.607 32.724 5.975 11.053 1.332 25.416 5.508 33.517 1.98 8.027-3.816 13.68-11.123 14.472-23.867.54-12.816-5.184-36.865-10.512-52.129-5.364-15.335-8.208-27.216-21.024-38.988-13.032-11.88-31.355-22.212-56.088-31.572 5.148-14.112 8.316-26.784 9.648-38.844 1.296-11.988.756-22.896-1.765-32.868 12.924-3.564 20.772-9.648 24.084-18.396 3.168-8.964 1.836-24.372-4.824-34.164-6.911-9.756-22.896-22.14-35.46-23.688-12.6-1.584-25.271 3.24-38.987 14.472-8.676-5.616-19.152-9.612-32.004-12.276-13.032-2.7-30.061-5.58-44.676-3.492-14.58 2.089-28.368 7.201-42.048 15.769z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path class="face" d="M146.254 39.865c-10.512-7.848-19.368-13.968-27.144-18.756-7.704-4.788-12.42-8.82-19.152-9.576-6.912-.864-15.624 1.188-21.96 4.788-6.444 3.636-12.492 10.296-16.344 16.776-4.032 6.444-6.66 14.184-7.2 21.132-.576 6.768.756 13.932 3.996 19.548 3.204 5.472 8.208 10.044 15.156 13.572-2.448 4.68-3.96 10.044-4.392 16.38-.468 6.336.252 13.752 1.62 21.132 1.26 7.236 1.764 14.508 5.976 21.96 4.248 7.416 12.816 15.804 18.756 21.96 5.724 5.976 8.172 9.288 15.948 13.968 7.776 4.608 17.712 9.072 30.348 13.536-1.404-4.5-2.52-8.568-3.204-12.744-.792-4.284-3.132-9.108-1.188-11.988 1.872-2.952 4.284-2.556 12.78-5.184 8.568-2.736 27.684-9.792 37.908-10.764 9.9-1.008 13.788 1.512 22.355 4.788 8.568 3.312 25.129 9.54 29.124 14.364 3.744 4.644-3.672 9.18-5.579 13.176-1.872 3.852-3.564 7.128-5.221 9.972 5.904 1.512 12.061.18 18.756-3.996 6.66-4.284 14.832-12.78 21.168-21.168 6.408-8.532 12.133-20.232 16.345-29.124 3.924-8.856 6.084-15.552 7.596-23.544 1.404-8.28 1.296-17.316 1.188-24.732-.181-7.38-.792-13.716-1.98-19.152 6.012-1.8 11.196-4.644 15.552-8.388 4.356-3.852 9.108-8.46 10.368-14.364 1.044-6.012.036-14.508-3.563-21.168-3.673-6.696-11.881-14.508-17.965-18.72-6.264-4.248-12.203-6.336-18.359-6.804-6.12-.612-9.937-1.44-17.964 3.204-8.137 4.572-18.108 12.636-30.313 24.336l-6.804-3.204c1.728-1.26 3.996-2.988 6.408-5.184 2.376-2.196 5.292-4.86 8.352-7.992-7.596-4.176-16.056-7.056-25.523-9.18-9.648-2.16-20.952-3.312-31.141-3.168-10.332.108-20.772 1.44-29.52 3.996-8.64 2.484-15.912 5.976-21.96 10.764l19.944 14.364c-1.044 1.728-2.088 3.456-3.168 5.184z" fill="#A16121" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M129.082 50.233c-7.668-6.156-14.796-10.188-21.924-11.952-7.236-1.908-15.228-1.512-20.376 1.188-5.22 2.736-9.792 8.208-9.972 14.76-.144 6.408 2.916 14.112 9.18 23.544 12.024-1.08 21.456-3.78 28.728-8.388 7.236-4.608 11.88-10.944 14.364-19.152z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M122.71 51.457c-3.528-3.384-8.1-5.652-13.572-6.804-5.616-1.296-15.228-1.62-19.548-.396-4.356 1.224-6.444 3.42-6.408 7.992.036 4.536 2.304 10.872 6.804 19.152 9.828-1.8 17.136-4.284 22.752-7.596 5.472-3.384 8.748-7.452 9.972-12.348z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M242.41 39.433c8.172-5.472 15.696-8.748 23.004-9.828 7.236-1.152 15.192-.072 20.124 3.096 4.716 3.096 9 9.144 8.568 15.624-.504 6.408-4.248 13.788-11.376 22.572-11.916-2.196-20.988-5.832-27.792-11.052-6.732-5.256-10.908-12.06-12.528-20.412z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path clip-rule="evenodd" d="M248.674 41.233c3.889-2.988 8.425-4.86 14.148-5.472 5.652-.792 15.191-.18 19.476 1.44 4.177 1.62 6.048 3.996 5.616 8.532-.504 4.5-3.348 10.548-8.532 18.432-9.647-2.7-16.775-5.832-21.96-9.684-5.148-3.888-8.064-8.209-8.748-13.248z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path clip-rule="evenodd" d="M129.73 135.517c1.548 9.108 9.756 15.336 18.36 13.86 8.568-1.476 14.256-10.044 12.708-19.188-1.584-9.108-9.792-15.336-18.36-13.86-8.604 1.476-14.292 10.044-12.708 19.188z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path clip-rule="evenodd" d="M135.202 133.825c1.044 6.084 6.516 10.224 12.24 9.252 5.724-.972 9.54-6.696 8.496-12.78s-6.516-10.224-12.24-9.252c-5.724.972-9.54 6.696-8.496 12.78z" fill="#FFF" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M139.558 136.921c.756 4.356 4.644 7.308 8.748 6.624 4.068-.72 6.804-4.824 6.048-9.144-.756-4.356-4.644-7.308-8.748-6.624-4.068.72-6.804 4.788-6.048 9.144zM208.138 133.789c-.611 9.252 5.94 17.208 14.616 17.784s16.236-6.444 16.849-15.696c.611-9.216-5.94-17.172-14.616-17.748-8.713-.576-16.237 6.444-16.849 15.66z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M213.862 133.465c-.396 6.156 3.96 11.448 9.756 11.844s10.836-4.284 11.232-10.44c.396-6.156-3.96-11.484-9.757-11.88-5.795-.36-10.799 4.32-11.231 10.476z" fill="#FFF" fill-rule="evenodd" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M217.391 137.461c-.324 4.428 2.808 8.208 6.947 8.46 4.141.288 7.74-3.06 8.028-7.452s-2.844-8.172-6.984-8.46c-4.14-.288-7.704 3.06-7.991 7.452z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M168.61 164.857c-4.464 1.26-8.856 2.412-13.176 3.996-4.428 1.368-10.764 2.088-12.78 4.788-2.088 2.808.072 7.452.792 11.592.612 3.996.432 8.064 3.204 12.348 2.592 4.32 6.804 10.152 13.176 13.176 6.372 2.772 20.124 5.724 25.128 3.996 4.968-1.836 6.3-6.48 4.392-14.364-4.14-4.212-7.2-7.668-9.576-10.764-2.412-3.024-5.04-5.364-4.392-7.596.648-2.484 4.284-5.256 7.992-6.372 3.636-1.116 8.856-1.152 13.572-.396 4.536.684 12.527 1.08 13.968 4.392 1.296 3.24-3.168 11.124-5.616 14.76-2.483 3.492-5.544 5.616-9.18 6.372-2.196 5.364-2.592 9-1.188 11.592 1.404 2.448 5.616 4.248 9.576 3.168 3.853-1.296 10.044-6.516 13.572-9.972 3.312-3.42 4.932-6.408 7.2-10.368 2.304-4.176 6.048-10.584 6.768-13.968.72-3.312.72-3.636-2.771-5.976-3.816-2.628-13.5-6.3-19.188-8.784-5.688-2.52-9.828-4.752-14.364-5.58-4.607-.72-8.711-.036-13.14.792a86.13 86.13 0 0 0-13.969 3.168z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M72.418 151.213c-6.12 7.812-12.672 16.848-19.944 27.504-7.452 10.62-17.244 25.704-23.544 35.928-6.228 10.08-10.152 15.408-13.572 24.335-3.636 8.857-6.264 19.404-7.596 28.729-1.404 9.217-2.88 19.801-.396 26.748 2.556 6.877 9.144 12.133 15.192 14.363 5.76 2.053 11.016 1.297 19.944-1.584 9-2.879 19.944-8.063 33.516-15.551.468-13.465 2.412-26.1 5.976-38.736 3.528-12.707 9.972-25.955 15.156-36.287 5.112-10.369 10.044-18.577 15.192-25.165a128.25 128.25 0 0 1-21.564-17.568c-6.696-6.84-12.816-14.184-18.36-22.716z" fill="#A16121" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M81.202 294.96c5.832-3.131 12.888-5.256 21.564-6.371 8.604-1.152 21.492-1.117 29.916-.432 8.352.539 12.96 1.078 19.944 3.994 6.876 2.916 16.02 8.426 21.168 13.178 4.968 4.607 6.408 9.07 9.18 14.363 2.736 5.184 5.076 10.729 7.164 16.775l12.385.396c.576-6.48 2.304-12.6 5.184-18.359 2.844-5.904 5.4-11.736 11.952-16.381 6.516-4.645 18.72-8.82 26.748-11.16 7.812-2.447 13.176-2.736 20.376-3.203 7.271-.576 14.652-.576 22.716 0-1.512-10.945-3.456-21.133-6.372-31.104-2.844-10.01-6.156-18.254-10.764-28.332a346.84 346.84 0 0 0-17.172-31.933c-3.889 2.52-7.164 4.608-9.973 5.976-2.808 1.332-3.995 2.232-6.768 2.412-2.88.072-6.3-.468-10.404-1.62-2.88 5.04-6.947 9.036-12.348 11.988-5.616 2.987-12.096 4.896-19.98 5.579-7.884.576-18.864-.539-26.711-1.979-8.064-1.477-15.372-4.249-20.376-6.805-5.04-2.772-7.92-5.652-9.18-9.18a185.851 185.851 0 0 1-11.952-3.6 164.415 164.415 0 0 1-11.196-4.356c-5.22 7.38-9.684 15.444-13.932 24.335-4.248 8.857-7.704 15.984-11.196 28.729-3.565 12.747-6.841 28.118-9.973 47.09zM287.914 153.697c-2.664 5.868-5.508 11.268-8.388 16.344-3.097 5.076-6.156 10.008-9.181 13.968-3.06 3.852-5.939 6.912-8.783 9.18 3.563 6.228 6.983 12.924 10.403 20.376 3.349 7.415 6.156 12.384 9.973 23.94 3.852 11.52 7.92 26.135 12.744 44.676 8.604 2.52 17.208 4.463 26.352 5.977 9.072 1.439 20.232 3.527 27.936 2.807 7.633-.756 13.86-3.24 17.568-7.596 3.564-4.5 4.248-11.016 3.996-19.152-.396-8.316-3.42-19.764-6.012-29.916-2.628-10.26-5.04-21.852-9.576-30.744-4.716-8.964-10.98-15.768-17.964-21.924-7.021-6.228-15.336-10.08-23.544-14.76-8.316-4.68-16.596-9.072-25.524-13.176z" fill="#A16121" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M129.406 420.349c-6.264-2.125-13.536-4.717-20.988-8.604-7.56-3.889-17.172-9.973-23.4-14.51-6.12-4.607-10.044-7.486-13.428-12.924-3.564-5.65-6.732-11.951-7.56-20.16-.828-8.314.36-20.088 2.448-29.051 2.016-9.18 5.652-18.541 9.396-24.768 3.636-6.121 6.372-9 12.096-11.846 5.652-2.986 12.924-4.822 21.276-5.65 8.28-.865 18.432-1.656 27.684.539 9.108 2.125 19.296 6.949 26.388 12.133 6.876 5.219 11.052 11.412 15.048 18.287 3.924 6.625 6.192 13.104 8.604 21.529 2.376 8.387 4.5 19.691 5.4 28.764.72 9.072.576 18.432-.828 25.02-1.584 6.301-3.06 9.252-7.776 13.176-4.752 3.852-13.752 7.92-20.196 9.973-6.588 1.871-12.816 1.908-18.54 1.619-5.832-.324-9.468-1.546-15.624-3.527z" fill="#A16121" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path clip-rule="evenodd" d="M151.186 359.833c-9.396-2.988-16.488-1.836-24.192.539-7.812 2.268-18.684 7.309-21.78 13.176-3.168 5.869-3.204 15.588 3.492 21.529 6.804 5.76 25.848 11.951 36.864 13.176 10.944 1.08 21.924-1.441 28.224-6.445 6.156-5.111 12.312-16.668 8.604-23.688-3.996-7.126-21.852-15.3-31.212-18.287z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M135.598 362.246c-4.644 1.043-13.392 3.383-18.036 6.479-4.716 2.953-9.972 6.77-9.396 11.305.684 4.465 5.184 11.557 12.924 15.588 7.704 3.889 23.22 8.064 32.256 7.813 8.784-.469 16.38-5.869 20.448-9.973 3.96-4.248 5.544-10.188 3.24-14.508-2.52-4.355-12.276-8.316-17.748-11.053-5.544-2.771-10.8-4.463-14.796-5.363-4.068-1.046-4.392-1.333-8.892-.288z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M82.858 330.781c-2.448 2.123-6.768 6.443-6.984 11.305-.144 4.715.9 13.787 5.904 17.496 4.968 3.6 18.612 7.199 23.436 4.57 4.716-2.771 6.66-14.58 4.284-20.447-2.628-5.904-15.192-12.42-19.62-14.543-4.428-2.233-4.824-.577-7.02 1.619z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M88.258 334.56c-2.16.648-4.644 2.844-5.652 5.904-1.116 3.061-2.916 8.533-.54 11.844 2.484 3.24 10.8 6.264 14.796 6.984 3.816.504 6.552-1.08 7.812-3.779 1.08-2.809.396-9.793-1.08-12.889-1.728-3.203-5.76-4.68-8.352-5.939-2.628-1.369-4.824-2.771-6.984-2.125z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M112.99 317.857c-3.06.863-2.196 2.557-1.872 7.02.288 4.428 1.548 14.4 3.492 19.369 1.8 4.932 3.852 8.387 7.524 9.684 3.6 1.043 11.592.143 14.256-2.988 2.592-3.313 2.448-10.26 1.368-15.588-1.296-5.365-4.176-12.637-8.352-15.588-4.212-2.882-13.392-2.917-16.416-1.909z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M115.438 326.46c-.468 3.457 2.628 11.125 4.284 15.084 1.476 3.961 2.628 7.523 5.112 8.064 2.448.287 8.82-2.232 9.684-5.904.756-3.889-2.844-12.6-4.824-16.416-2.052-3.852-4.932-6.047-7.272-6.191-2.52-.109-6.516 1.871-6.984 5.363z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M148.774 346.117c2.412 3.779 5.328 4.787 8.604 5.363 3.348.469 8.928.828 11.052-2.123 1.908-3.096 2.448-10.656.792-15.877-1.872-5.398-6.984-12.311-11.016-15.336-4.104-2.951-10.26-3.996-12.924-2.16-2.664 1.801-3.6 7.488-2.952 12.637.576 5.004 3.888 13.572 6.444 17.496z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M164.938 338.593c-.612-2.953-.864-7.525-3.528-10.225-2.844-2.771-10.296-7.236-12.636-6.191-2.304 1.043-2.376 7.992-1.332 12.096.972 4.031 3.996 9.828 6.984 11.844 2.844 1.729 8.424.756 10.224-.539 1.656-1.37.828-4.069.288-6.985z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M274.198 294.132c-5.976-.252-13.428-.684-20.269.648-7.02 1.225-14.147 3.133-20.556 6.84-6.444 3.492-13.032 7.523-16.992 14.725-3.96 7.271-5.615 18.684-6.516 28.404-1.116 9.611-.9 19.979.647 28.727 1.513 8.568 4.032 15.012 8.82 22.537 4.788 7.488 11.844 17.1 19.908 21.887 7.92 4.537 19.116 5.689 27.756 5.545 8.532-.252 15.769-2.195 23.508-6.516 7.704-4.357 16.885-10.332 22.536-19.297 5.472-9.18 8.964-23.363 10.477-34.92 1.367-11.736.936-24.66-1.98-34.309-3.024-9.756-10.188-17.676-15.66-23.184-5.58-5.4-11.664-7.344-16.992-9.143-5.291-1.907-8.891-1.764-14.687-1.944z" fill="#A16121" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M260.554 363.072c8.568-.395 14.473 2.16 20.629 6.014 6.119 3.672 14.256 10.584 15.659 16.307 1.261 5.689-.936 14.113-7.956 17.641-7.235 3.385-25.02 4.32-34.596 2.809-9.684-1.656-18.504-6.301-22.716-11.988-4.14-5.832-6.876-17.1-1.944-22.285 4.824-5.221 22.212-8.102 30.924-8.498z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M273.37 368.724c3.6 1.908 10.656 6.012 13.968 9.686 3.313 3.563 6.805 8.027 5.473 11.844-1.656 3.779-7.236 8.639-14.652 10.404-7.524 1.547-21.924 1.475-29.448-.758-7.487-2.482-12.888-8.783-15.228-13.211-2.484-4.537-2.484-10.045.576-13.176 3.096-3.168 12.348-4.32 17.748-5.4 5.327-1.115 10.151-1.367 13.896-1.188 3.564-.072 3.995-.072 7.667 1.799z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M311.926 330.457c2.305 2.125 6.769 6.443 7.021 11.305.107 4.715-1.08 13.787-5.94 17.496-4.968 3.6-18.792 7.199-23.399 4.572-4.752-2.773-6.84-14.58-4.32-20.449 2.592-5.904 15.12-12.42 19.656-14.543 4.354-2.233 4.642-.577 6.982 1.619z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M306.563 334.236c2.088.648 4.571 2.846 5.651 5.904 1.009 3.061 2.809 8.533.54 11.844-2.592 3.24-10.908 6.266-14.796 6.984-3.924.504-6.624-1.08-7.812-3.779-1.188-2.809-.504-9.793 1.08-12.889 1.548-3.203 5.615-4.68 8.315-5.939 2.522-1.367 4.861-2.772 7.022-2.125z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M282.767 313.968c2.951.793 2.159 2.52 1.907 6.984-.359 4.428-1.655 14.4-3.491 19.367-1.908 4.934-3.925 8.389-7.561 9.686-3.815 1.152-11.628.072-14.256-2.953-2.556-3.275-2.628-10.332-1.332-15.623 1.152-5.365 4.212-12.637 8.352-15.588 4.14-2.916 13.213-2.843 16.381-1.873z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M280.354 322.572c.396 3.492-2.7 11.053-4.284 15.049-1.548 3.852-2.736 7.561-5.112 8.064-2.556.287-8.892-2.232-9.684-5.904-.828-3.889 2.771-12.6 4.824-16.416 1.979-3.852 4.823-6.049 7.271-6.191 2.413-.11 6.409 1.835 6.985 5.398z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M247.019 347.017c-1.765 4.211-4.356 5.76-7.381 6.984-3.168 1.08-8.712 2.627-11.231.07-2.556-2.734-4.645-9.863-3.924-15.406.611-5.473 4.355-13.609 7.775-17.209 3.313-3.744 9.288-5.904 12.24-4.68 2.916 1.26 4.86 6.623 5.4 11.809.325 5.112-1.188 14.04-2.879 18.432z" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/><path d="M229.702 342.804c-.144-3.059-.684-7.416 1.44-10.691 2.124-3.24 8.567-9.145 11.159-8.568 2.448.504 3.816 7.381 3.708 11.592-.252 4.105-2.088 10.477-4.535 12.996-2.593 2.305-8.101 2.377-10.116 1.477-1.98-1.009-1.656-3.925-1.656-6.806z" fill="#834217" stroke="#000" stroke-miterlimit="10" stroke-width=".036"/></g></svg>

<p id="bearBox">Touching Bear</p>
＆＃13;
＆＃13;
＆＃13;

备注：

始终要记住，优化/清洁网络<svg>是理想的选择，以减小其尺寸。

答案 1 :(得分：2)

在我看来，最简单的方法是使用SVG，使用遮罩或剪辑路径隐藏效果区域。这将为您提供最灵活的效果和非常好的浏览器支持。在此处查看MDN指南：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

根据您所需的效果，您可以通过使用CSS中的filter来减少工作量。您可以应用简单的效果，如色调偏移，棕褐色调或灰度。 https://developer.mozilla.org/en/docs/Web/CSS/filter

答案 2 :(得分：1)

执行此操作的一种方法是在画布上绘制svg，并在鼠标位于非透明像素上时为该元素添加一个类。

bear.addEventListener("mousemove", function(ev) {
  var rect = bear.getBoundingClientRect();
  var relX = ev.clientX - rect.left;
  var relY = ev.clientY - rect.top;

  var canvas = bear.svgHoverCanvas;
  if (!canvas) {
    canvas = bear.svgHoverCanvas = document.createElement("canvas");
    canvas.width = bear.width;
    canvas.height = bear.height;
    var context = canvas.getContext('2d');
    context.drawImage(bear, 0, 0, bear.width, bear.height);
  }
  var context = canvas.getContext('2d');
  var data = context.getImageData(relX, relY, 1, 1);
  if (data.data[3] > 0) {
    bear.classList.add("svgHover");
  } else {
    bear.classList.remove("svgHover");
  }
});

bear.addEventListener("mouseout", function(ev) {
  bear.classList.remove("svgHover");
});
#bear {
  width: 150px;
}
#bear.svgHover + #bearBox {
  background: green;
}
#bearBox {
  position: absolute;
  background: red;
}
<img id="bear" src="data:image/png;base64,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">
<p id="bearBox">Touching Bear</p>

我不得不将svg转换为base64以避免跨域。如果从跨域加载svg，则此方法将不起作用。

Fiddle

答案 3 :(得分：0)

您可以在图像周围创建粗略的clip-path以获得所需的效果。

我在这个例子中使用了http://bennettfeely.com/clippy/。 你可以更小心，不要切掉边缘的黑色。我不是艺术家。

＆＃13;
＆＃13; 
#bear {
  width: 150px;
  -webkit-clip-path: polygon(33% 3%, 25% 1%, 17% 5%, 13% 12%, 13% 17%, 18% 21%, 17% 28%, 19% 34%, 11% 42%, 7% 49%, 2% 58%, 0% 68%, 5% 72%, 11% 72%, 20% 68%, 18% 75%, 16% 84%, 19% 90%, 26% 95%, 33% 98%, 42% 99%, 49% 97%, 51% 94%, 52% 89%, 51% 82%, 50% 79%, 54% 79%, 53% 84%, 55% 91%, 59% 95%, 65% 99%, 75% 99%, 83% 95%, 86% 89%, 87% 79%, 85% 72%, 78% 66%, 87% 68%, 96% 69%, 100% 64%, 99% 57%, 95% 45%, 90% 40%, 82% 36%, 77% 34%, 79% 28%, 79% 23%, 79% 18%, 86% 15%, 86% 9%, 83% 1%, 73% 1%, 66% 2%, 59% 2%, 51% 0%, 42% 1%);
  clip-path: polygon(33% 3%, 25% 1%, 17% 5%, 13% 12%, 13% 17%, 18% 21%, 17% 28%, 19% 34%, 11% 42%, 7% 49%, 2% 58%, 0% 68%, 5% 72%, 11% 72%, 20% 68%, 18% 75%, 16% 84%, 19% 90%, 26% 95%, 33% 98%, 42% 99%, 49% 97%, 51% 94%, 52% 89%, 51% 82%, 50% 79%, 54% 79%, 53% 84%, 55% 91%, 59% 95%, 65% 99%, 75% 99%, 83% 95%, 86% 89%, 87% 79%, 85% 72%, 78% 66%, 87% 68%, 96% 69%, 100% 64%, 99% 57%, 95% 45%, 90% 40%, 82% 36%, 77% 34%, 79% 28%, 79% 23%, 79% 18%, 86% 15%, 86% 9%, 83% 1%, 73% 1%, 66% 2%, 59% 2%, 51% 0%, 42% 1%);
}

#bear:hover + #bearBox {
    background: green;
}

#bearBox {
  position: absolute;
  background: red;
}
＆＃13; 
<img id="bear" src="http://www.clipartbest.com/cliparts/4Tb/o5d/4Tbo5dxEc.svg">
<p id="bearBox">Touching Bear</p>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-3)

Clip-Path

在悬停效果方面效果很好

相关问题
最新问题