Hover effect only on letter (not container)
Question
I have a huge text and would like to trigger a color change when the letters are hovered . This means the white background shouldn't trigger the hover effect, only the black fiill of the letter should trigger it.
The default hover effect is triggered when the text container is hovered like this :
* {margin: 0;padding: 0;} p { font-size: 75vw; line-height: 100vh; text-align: center; } p:hover { color: darkorange; }
<p>SO</p>
Using the text element in svg acts the same way :
text:hover{ fill:darkorange; }
<svg viewbox="0 0 100 100"> <text x="0" y="50" font-size="70">SO</text> </svg>
Is there a way to trigger the hover effect only when the fill of the letters (black parts in the examples) are hovered and not on the containing box?
4 answers
solution1
3 ACCPTED 2015-05-15 13:10:21
You can use Inkscape to convert the text to a path via Path>Object to path or Path>Stroke to path. Once the text is actually a path hover will by default only operate on the rendered parts of the path.
Ie you'd need to edit the document itself, it's not something SVG directly supports currently although is is being considered for the upcoming SVG 2 specification .
solution2
2 2015-05-15 18:01:46
I've had some mixed success with making the letters out of pure CSS (CSS adapted from CSS Sans ):
$('span').hover(function(){ $('.A-after,.A-before').css({ 'background-color':'red', 'z-index':'99' }); $('.A').css('border-bottom','solid 14px red'); },function(){ $('.A-after,.A-before').css({ 'background-color':'black', 'z-index':'99' }); $('.A').css('border-bottom','solid 14px #000000'); });
.A { position:relative; left:30px; width:60px; height:91px; border-bottom:solid 14px #000000; } .A-before { transform:skew(-19deg, 0); position:absolute; content:''; top:12.5px; left:35px; width:16px; height:125px; background-color:#000000; } .A-after { transform:skew(19deg, 0); position:absolute; content:''; top:12.5px; left:78px; width:16px; height:125px; background-color: #000000; } span { display: inline-block; }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <span class="A-before"></span> <span class="A"></span> <span class="A-after"></span> </div> </body> </html>
solution3
-1 2015-05-15 12:58:16
This is unconventional, but you could put an a around it and target a:hover . Then also include a pointer-event and cursor style.
.text a, .text a:link, .text a:visited, .text a:active{
pointer-events: none;
cursor: default;
text-decoration:none;
}
.text a:hover{
color:orange !important;
}
solution4
-3 2015-05-15 12:55:49
Use the pseudo class ::first-letter
p::first-letter {
font-size: 100px;
}
This will make every first letter of a paragraph to have the font size of 100px
Now the trick of hover effects depends on you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.