Rolling Text Link
I'm using the code found here to create my text links located on this page. What I am trying to accomplish is having the rollover text be the description of the link ie: 'Insight' goes to the 'About' page. Some of descriptions are too long and are getting cut off and when I try to make them bigger they just overlap the link next to it. Any suggestions on how to fix it or a better method I should be using? Here is the HTML I'm using.
<a href="http://brandingbyinsight.com/ingenuity" class="rollover_a" style="color:#000000;"><span data-title="Services">Ingenuity.</span></a>
Sounds like you're asking for design advice as well.
Judging by the way you have your links presented (each list item with an equal fixed width in a row), a longer description will certainly overlap other links if you do end up finding a solution to make them not "cut off" (it exists, but I'm just not sure if it'll give you a desired result that you're looking for).
Either customize the widths of each list item so they don't overlap, or use some other cool transition (i.e. have the description slide down under the link rather than flip it). That's what I would suggest personally; however, it's up to you to choose what's considered a "better method" of displaying your descriptions.
- make html text input field grow as I type?
- HTML text-overflow ellipsis detection
- Dynamic Flickr background image for CSS tag
- Applying a Stylesheet Within One Div Only
- Why `cursor: pointer` and `:hover` property is not being applied?
- Height of flex element is not respected unless display: table is set?
- InertiaJS - Vue - Laravel : Utilizing CSS Files
- How can I center the title in Appbar.Header in react-native-paper?
- How to exactly specify the height of a navigation bar
- Javascript carousel like-presentation gallery
- min-height:100%; height:100%; not working
- I'm trying to place the placeholder in the border of the input field
- Float CSS attribute causing parent div not to inherit height?
- Using margin on flex items
- CSS After Element to insert mailto link?
- Can I create a div with a Curved bottom?
- Position sticky on thead
- Is it possible to have a default CSS style if no other styles are applied?
- Lenis Scroll: Unable to scroll to bottom of page
- Svelte Responsive Menu does not show vertical items on narrow screen
- CSS Print Layout - Printing on a Single Page
- CSS print media query prints only first page
- Triple dot CSS animation on a loading screen
- Choosing the most ideal font format
- How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
- Logging when a CSS variable not found
- Why does `justify-content: stretch` require `flex-grow` to make input elements expand
- Add CSS cursor property when using "pointer-events: none"
- Auto-adjusting textarea to be the same height as inner-text onkeydown
- Continuous CSS rotation animation on hover, animated back to 0deg on hover out