앵커의 하위 텍스트 장식을 제거 할 수 없습니까?

Question

속성을 가진 모든 요소에 툴팁 요소 인 .appends()이있는 글로벌 자바 스크립트 함수가 있습니다.

내가 툴팁에 text-decoration 규칙을 제거 할 수없는 것 때문에 CSS를 깰 것 같다 data-tooltip 속성 nchor a을 제공하려고 때까지 모든 멋지다.

앵커의 하위에서 text-decoration을 어떻게 제거합니까?

밑줄은 기본 앵커 색상 밑줄이 있으므로 부모 앵커에서 분명히 상속되지만 툴팁 텍스트의 color은 주황색입니다.

내가 무슨 말을하고 있는지 더 명확하게 이해하려면 http://img.ly/35kc을 참조하십시오.

업데이트 여기

툴팁 내 CSS는, 요청에 따라

/*TOOLTIPS*/ 

.tooltip_placeholder { 
    position: relative; 
    width: 0px; 
    height: 0px; 
    white-space:nowrap; 
    display: inline; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip_boundary { 
    position: absolute; 
    width: 300px; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip_border { 
    z-index: 100; 
    background: url(/sales/global/images/tooltip_arrow.png) no-repeat; 
    padding-left: 35px; /*left offset*/ 
    background-position: 16px 0px; 
    float: left; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip { 
    padding: 8px; 
    color: #A97D35; 
    background: #FBF98E; 
    -moz-border-radius: 0px 8px 8px 8px; 
    border-radius: 0px 8px 8px 8px; 
    border: 6px solid #F9E98E; 
    font-size: 12px; 
    text-transform: none; 
    z-index: 100; 
    text-decoration: none; 
} 

이 툴팁에 넣어하는 방법이다 :

$(element).append('<div class="tooltip_placeholder"><div class="tooltip_boundary"><div class="tooltip_border" style="display: none;"><div class="tooltip">'+$(element).attr('data-tooltip')+'</div></div></div></div>') 

업데이트 2

@Guffa 님이 친절하게이 내용을 보냈습니다 http://jsfiddle.net/TxRmk/ Safari 나 Chrome이 아닌 FF로 작동하도록 브라우저 특정 문제가있는 것 같습니다. IE를 확인하지 않았지만 완전히 다른 것을 수행합니다.

Answer 1

http://jsfiddle.net/CHSmV/

제대로 작동합니다. 네가 할 수 있다면 내 바이올린을 봐라. 비 툴팁 텍스트 주위에 추가 스팬을 추가하고 두 스팬에 클래스를 추가했습니다. 그런 다음 관련 범위를 적절한 text-decoration으로 타겟팅했습니다.

FF 3.6, IE 7 + 8, Safari 5 및 Chrome 9에서 작동했습니다.

Answer 2

밑줄 작업을 제거하기 위해 툴팁 클래스를 수정하지 않았습니까? 이것을 툴팁의 클래스 정의에 추가하십시오.

$(function(){ 
    $('[data-tooltip]').children().css('text-decoration','none'); 
}); 

UPDATE

나는이 행동이 브라우저에 의해 발생할 수 있습니다 생각이 작동하지 않은 경우

text-decoration: none; 

이를 사용해보십시오. 왜이 방법을 사용하지 않으시겠습니까?

a:hover {text-decoration: none; } 

Answer 3

내가의 text-decoration이 상속되지 않도록하려고하면

http://jsfiddle.net/TxRmk/

CSS :

a { position: relative; } 
a span { display: none; position: absolute; left: 10px; top 20px; padding: 5px; border: 1px solid #999; background: #ccc; color: #fff; } 

자바 스크립트 :

$('a').hover(function(){ 
    $('span', this).css({ display: 'block' }) 
}, function(){ 
    $('span', this).css({ display: 'none' }); 
}); 

HTM L :

<a href="#">Info<span>Information</span></a> 

Answer 4

좋아요. 내 질문에 하나의 해결책이 있습니다. <div> 요소를 앵커 태그 안에 사용하지 마십시오. 내가 대신 <span>를 사용하여 시도하고 나는 그것이 당신의 HTML을 수정하지 않고 작동시킬 수 couldnt는 지금