HTML 제출 버튼의 마우스를 올리면 툴팁이 표시됩니다.

Question

아래와 같이 JSP 페이지에 간단한 링크가 있습니다.

<a href="" title="Press the button to delete the row." class="icon-2 info-tooltip"></a> 

아이콘이 표시되고 마우스를 가리키면 다음 스냅 샷과 같은 다른 아이콘이 표시된 툴팁이 표시됩니다.

툴팁을 상기 HTML 테이블의 마지막 칼럼의 마지막 줄에 표시되어있다.

기본 아이콘을 표시하는 CSS 클래스는 다음과 같습니다.

a.icon-2  
{ 
    background: url(../images/table/table_icon_2.gif) no-repeat; 
    display: block; 
    float: left; 
    height: 24px; 
    margin: 0 8px 0 0; 
    width: 24px; /*Displays a default icon*/ 
} 

마우스가 링크 위로 이동하면 기본 아이콘이 다음 CSS 클래스로 바뀝니다.

a:hover.icon-2 
{ 
    background: url(../images/table/table_icon_2.gif) 0 -24px; 
    /*Displays icon on mouse hover.*/ 
} 

실제로 툴팁을 표시하는 CSS 클래스는 다음과 같습니다.

#tooltip  
{ 
    background-color: #8c8c8c; 
    border: 1px solid #767676; 
    color: #fff; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: normal; 
    opacity: 0.85; 
    padding: 0 5px; 
    position: absolute; 
    text-align: left; 
    z-index: 3000; 
} 

는 지금, 나는 마우스 호버 <input type="submit">에 버튼을 제출 HTML에 동일한 아이콘과 같은 도구 설명을 표시해야합니다. 어떻게 표시 할 수 있습니까?

Answer 1

a:hover.icon-2 대신 .icon-2:hover을 시도하십시오.