I am curious if it is feasible to have a drop shadow on my SVG element, but only make it visible when hovered over (:hover). I utilized the filter tag for the SVG and this is somewhat the effect I am aiming for. From what I have read, inline :hover is not supported, so I am exploring alternative methods to achieve this. If there is another way to accomplish this, how can I implement it on my #sun?
Simply hover over to apply the filter...
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
</head>
<style>
svg {
border: 3px solid red;
}
text {
font-family: 'Unica One', cursive;
font-size:25px;
}
a#sun {
fill: #D8A089;
}
a:hover#sun {
fill:#FBA618;
filter: url(#poly);
}
a:hover#seagull {
opacity: .8;
}
</style>
<body>
<svg width="185" height="200">
<defs>
<filter id="poly" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="15" dy="15" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<a id="sun" href="https://en.wikipedia.org/wiki/Sun" target="_blank"> <!-- where I want the drop shadow to go -->
<path d="M145,122 a65,65 0 1,0 -115,0"></path>
</a>
<a id="seagull" href="https://en.wikipedia.org/wiki/Gull" target="_blank"> <!-- polygon seagull -->
<polygon points="0,0 8,16 40,22" style="fill:#494949" />
<polygon points="8,16 40,22 80,41 45,42 " style="fill:#E3E4DF" />
<polygon points="80,41 45,42 60,65" style="fill:#EFEFEF" />
<polygon points="80,41 60,65 70,90 100,70" style="fill:#EBEAE5" />
<polygon points="80,75 45,95 50,105 110,105" style="fill:#E3E4DF" />
<polygon points="45,95 10,100 50,105" style="fill:#535257" />
<polygon points="80,75 110,105 120, 90" style="fill:#EAE9E4" />
<polygon points="120,90 80,75 110,55 130,60 " style="fill:#EFEFEF" />
<polygon points="110,55 130,60 132,50" style="fill:#EBEAE5" />
<polygon points="132,50 130,60 155, 48" style="fill:#E4E5E0" />
<polygon points="155, 48 165, 35 140, 49.5" style="fill:#505052" />
<polygon points="120,90 123,80 136,86 135,89 " style="fill:#3F3F3F" />
<polygon points="136,86 135,89 141,88 " style="fill:#C55F48" />
</a>
<g fill="none" stroke="black" stroke-width="2">
<path stroke-dasharray="20,10,5,5,5,10" stroke-linecap="round" d="M5 125 l170 0" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-linecap="round" d="M25 135 l140 0" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-linecap="round" d="M50 145 l90 0" />
</g>
<text x="85" y="170" style="fill:black;">R
<tspan x="85" y="190">C</tspan>
</text>
</svg>
</svg>
</body>
</html>I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...
Struggling to create an inline label with a select element using Bootstrap, I came across this helpful example on jsfiddle: http://jsfiddle.net/kokilajs/1q53pr6j/ <form id="searchForm" method="get" class="form-horizontal" role="form"> <div class= ...
After successfully exporting blender JSON animation into THREE.js, I have encountered a situation where everything is functioning correctly. However, my current goal is to only play the animation once and then stop instead of having it loop continuously. ...
I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...
Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...
I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...
Is it possible to create a PHP script that can upload only the first 1 MB of a very large file? Can this be achieved with a standard form upload in PHP by closing off the connection after 1 MB is uploaded? I have researched various uploaders (HTML5/Java ...
Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Framework I cannot remove it. I'm trying to apply dynamic styling to the input and label elements in my HTML using jQuery. However ...
I am attempting to display or hide multiple services, each with a custom attribute called data-serviceregion, which may have multiple values based on the selected option from the dropdown. <form class="book-now"> <select name="region" id="region" ...
Discover my exclusive menu by visiting this link. For those who are curious about the source code, here's the HTML snippet: <div id='menu-container'> <ul id='menu' class="menu"> <li class='active'>& ...
Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...
In my coding project, I decided to create a table with checkboxes in each column. <table class="bordered"> <thead> <tr style="cursor:pointer" id="tableheading" > <th>Name ...
var info = { 2016-09-24: { 0: {amount: 200, id: 2}, 1: {...} }, 2016-09-25: { 0: {amount: 500, id: 8}, 1: {...} } } In order to display the data stored in the object above, I want to create a view that looks like this: "**" will r ...
Currently, I am facing a challenge in positioning 4 divs in the corners of their parent div. The HTML code structure is as follows: <div class="resize"> <div class="n w res"></div> <div class="n e res"></div> < ...
Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...
Looking for some assistance with CSS. I want to display the text "Featured Page" with a picture appearing on the right side upon hovering (mouseover). Currently, the picture shows up under the text using the following CSS, but I need it to be larger and pl ...
How can I create an input box with a specific background? I have tried the following code but it's not displaying properly. What is the correct way to achieve this? In addition, I need to create variations of this button as described below: I wa ...
Can someone explain to me how to modify CSS using jQuery? I am trying to change the font color of "Valid VIN" to red, but my current code doesn't seem to be working: $("#result").html(<font color="red">"Valid VIN"</font>); ...
Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...
My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...