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

Question

Question:

What is the easiest/best way to ensure that the CSS hover effect be applied only to the parts of a complex image that aren't transparent?

I have an svg with parts that are transparent, however, the hover effect will be applied to the entire svg's rectangular area.

Code Snippet:

 #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> 

In the code snippet above, the requirement is that the :hover state is only triggered by hovering the bear, not the entire img element (background set to red for illustration purposes) .

---

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

Answer 1

How to trigger the hover event only on inner elements of an <svg> , not on the SVG viewport itself?

There are multiple ways you can embed an SVG, here are some:

• img
• object
• svg
• css background

Their pros and cons are not in the scope of this answer, however we will point out that using the img tag when dealing with interactions in an svg , such as hover events, is not a good option .

Even though an <svg> is being used as a source, it will be rendered just like a raster because it is in an <img> source attribute. You can only attach event handlers to the whole "rectangle".

---

For this to work, use an <svg> or an <object> element.

Inside the element, use group tags <g> to wrap the related elements and attach a single event listener per set.

---

Simplified Example:

Instead of this:

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

Do this:

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

---

Code Snippet:

 const inner = document.querySelector('.inner'); const box = document.getElementById('bearBox'); inner.addEventListener('mouseenter', () => box.classList.add('hovered')); inner.addEventListener('mouseleave', () => box.classList.remove('hovered')); 

 #bear { width: 150px; } #bearBox.hovered { background: green; } #bearBox { position: absolute; background: red; } 

 <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> 

---

Notes:

Always have in mind that optimizing/cleaning <svg> s for the web is ideal in order to decrease its size.

Answer 2

The easiest way in my opinion would be with an SVG, using a mask or clip path to hide areas of the effect. This would give you the most flexibility with your effects and pretty good browser support. Check out the MDN guide here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

Depending on your desired effect, you may be able to get away with using a filter in CSS would be significantly less work. You could apply simple effects like hue shifting, sepia tone, or grayscale. https://developer.mozilla.org/en/docs/Web/CSS/filter

Answer 3

One way to do this would be to draw the svg on canvas and add a class to the element if the mouse is over a non-transparent pixel.

 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> 

I had to turn the svg into base64 to avoid cross-domain. If the svg is loaded from cross-domain, this approach will not work.

Fiddle

Answer 4

You can create a rough clip-path around the image to get the effect you want.

I used http://bennettfeely.com/clippy/ in this example. You can be more careful and not cut the black out of the edges. I'm no artist.

 #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; } 

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

Answer 5

Clip-Path

在悬停效果方面效果很好