Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Mouse over text on Icons

is there a better way that writing a ton of CSS code to add mouse over effects to Icons to be compliant with ADA.  Need to be able to add printer icon and when user mouse over the icon it should say click here to print.  New to Design Studio.

Former Member replied

Hi,

Give the button a class name in properties (lets call it here as "X"), then create new CSS file and write in it:

.X:hover:after{

                background: #FFFFFF;

                border:1px solid;

                border-color:#666666;

                border-radius: 5px;

                top: 60px;

                color: #333333;

                content: "Click here to print";

                left: 50%;

                padding: 5px 15px;

                position: absolute;

                z-index: 88;

                width: 150px;

                box-shadow: 1px 1px 3px #888888;

}

Most of the things I wrote is for design, the most important thing is the content.

Link your application with the CSS file you wrote, and you are done...

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question