source

앵커 태그 내에서 제목 속성의 스타일을 변경하는 방법은 무엇입니까?

manycodes 2023. 8. 14. 22:58
반응형

앵커 태그 내에서 제목 속성의 스타일을 변경하는 방법은 무엇입니까?

예:

<a href="example.com" title="My site"> Link </a>

브라우저에서 "제목" 속성의 표시를 변경하려면 어떻게 해야 합니까?기본적으로 노란색 배경과 작은 글꼴만 있습니다.저는 그것을 더 크게 만들고 배경색을 바꾸고 싶습니다.

제목 속성을 스타일화하는 CSS 방법이 있습니까?

실제로 CSS만 필요로 하는 순수한 CSS 솔루션이 있는 것 같습니다.attr식, 생성된 콘텐츠 및 속성 선택기(IE8까지 거슬러 올라가 작동함을 시사함):

https://jsfiddle.net/z42r2vv0/2/

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}
<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

@ViROScar에서 입력한 업데이트: 위의 예에서 "제목" 속성을 사용했지만, 특정 속성을 사용할 필요는 없습니다. 실제로 CSS의 혜택을 받을 수 없는 사용자가 컨텐츠에 액세스할 수 있을 가능성이 있으므로 "alt" 속성을 사용하는 것이 좋습니다.

다시 업데이트 코드를 변경하지 않을 것입니다. 왜냐하면 기본적으로 "tooltip" 속성이 "tooltip" 속성을 의미하게 되었기 때문이고, 호버에서만 액세스할 수 있는 필드 내에 중요한 텍스트를 숨기는 것은 좋은 생각이 아닐 수 있지만, 이 텍스트에 액세스할 수 있도록 하는 데 관심이 있다면 "aria-label" 속성이 가장 적합한 장소인 것 같습니다. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

당신은 실제 스타일을 만들 수 없습니다.title기여하다

의 텍스트가 어떻게title표시되는 특성은 브라우저에 의해 정의되며 브라우저마다 다릅니다.웹 페이지에서 브라우저가 표시하는 도구 설명에 스타일을 적용할 수 없습니다.title기여하다.

그러나 다른 속성을 사용하여 매우 유사한 것을 만들 수 있습니다.

CSS와 사용자 지정 특성(예: CSS)을 사용하여 유사 도구 설명을 만들 수 있습니다.data-title)

이 경우, 저는.data-title기여하다.data-* 속성은 DOM 요소/HTML에 사용자 정의 데이터를 저장하는 방법입니다. 속성에 액세스하는 방법은 여러 가지가 있습니다.중요한 것은, 그들은 CSS에 의해 선택될 수 있다는 것입니다.

CSS를 사용하여 다음과 같은 요소를 선택할 수 있습니다.data-title그러면 CSS를 사용하여 (또는 )을 사용하여 속성 값을 포함하는 속성을 만들 수 있습니다.

스타일 지정 도구 설명 예제

더 크고 다른 배경색(질문 요청에 따라): 

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

더 정교한 스타일링(이 블로그 게시물에서 수정):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

알려진 문제

실제와 다르게title툴팁, 위의 CSS에 의해 생성된 툴팁은 반드시 페이지에서 볼 수 있도록 보장되지 않습니다(즉, 보이는 영역 밖에 있을 수 있습니다).반면, 실제 툴팁의 경우가 아닌 현재 창 안에 있어야 합니다.

또한 유사 도구 설명은 마우스가 해당 요소의 위치보다 유사 도구 설명이 있는 요소에 상대적으로 위치합니다.유사 도구 설명이 표시되는 위치를 미세 조정할 수 있습니다.요소와 관련하여 알려진 위치에 나타나는 것은 상황에 따라 이점 또는 단점이 될 수 있습니다.

사용할 수 없습니다.:before또는:after가 에.

이 답변에는 "입력 필드에서 :before 또는 :before를 사용할 수 있습니까?"라는 좋은 설명이 있습니다.

이 은 효적으로다, 은과같요은이소방의다수없니미합음과 같은 에 직접 사용할합니다.<input type="text"/>,<textarea/>,<img>입니다. 쉬운해은용아닌요포소것장는입다니하를기가결책▁etc것다▁that입니▁is▁a는▁the▁in▁easy▁the등.<span>또는<div>용기에 유사 툴팁이 있습니다.

도설 사예제에 툴팁을 하는 예<span>비선택적 요소 래핑:

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}
Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

위에 링크된 블로그 게시물의 코드(내가 여기서 표절한 답변에서 처음 본 것)에서, 나는 그것을 사용하는 것이 명백해 보였습니다.data-* 대신 title기여하다.그렇게 하는 것은 (지금은 삭제된) 답변에 대한 스노스톰의 코멘트에서도 제안되었습니다.

다음은 방법의 예입니다.

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

CSS는 툴팁 모양을 변경할 수 없습니다.브라우저/OS에 의존합니다.다른 것을 원한다면 기본 툴팁 대신 요소 위에 마우스를 놓으면 Javascript를 사용하여 마크업을 생성해야 합니다.

여기서 답을 찾았습니다: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

나만의 코드는 이렇습니다. 속성 이름을 변경했습니다. 속성의 제목 이름을 유지하면 동일한 텍스트에 대해 두 개의 팝업이 나타납니다. 또 다른 변경 사항은 호버링에 대한 내 텍스트가 노출된 텍스트 아래에 표시된다는 것입니다.

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(data-gloss);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
<a class="tags" data-gloss="Text shown on hovering">Exposed text</a>

저는 제 20줄 자바스크립트 솔루션을 여기에 게시하려고 생각했습니다.완벽하지는 않지만 툴팁에서 필요한 내용에 따라 유용할 수 있습니다.

사용 시기

  • 모든 요소의 합니다.TITLE속성 정의됨(앞으로 문서에 동적으로 추가되는 요소 포함)
  • 툴팁에 한 Javascript단, "Javascript/HTML"만 해당).TITLE으로 명확함), 성속으 확의, 미적로명함명확▁attribute함)로,)
  • 매우 가볍습니다(약 300바이트의 압축 및 축소).
  • 매우 기본적인 스타일리시한 툴팁만 원하는 경우

사용하지 않을 때

  • jQuery가 필요하므로 jQuery를 사용하지 않는 경우 사용하지 마십시오.
  • 둘 다 툴팁이 있는 중첩된 요소에 대한 지원이 잘못됨
  • 화면에 두 개 이상의 도구 설명이 동시에 필요합니다.
  • 시간이 지나면 도구 설명이 사라집니다.

코드

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

DOM이 준비되기 전에 이 코드를 실행하더라도 아무 곳에나 붙여넣으면 됩니다(DOM이 준비될 때까지 툴팁이 표시되지 않습니다).

사용자 지정

변경할 수 .var두 번째 줄에 있는 선언을 사용자 지정합니다.

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

스타일.

이제 다음 CSS를 사용하여 툴팁 스타일을 지정할 수 있습니다.

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

사용자 지정 도구 설명 패턴의 jsfidle은 다음과 같습니다.

CSS 포지셔닝 및 pseduo 클래스 선택기를 기반으로 합니다.

MDN 문서에서 유사 클래스의 브라우저 간 지원 여부 확인

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

네이티브 도구 설명은 스타일을 지정할 수 없습니다.

즉, 기본 툴팁 대신 요소가 호빙될 때 스타일 부동 도면층을 표시하는 라이브러리를 사용하여 코드 수정이 거의 또는 전혀 필요하지 않습니다.

기본 브라우저 도구 설명은 스타일을 지정할 수 없습니다.그러나 Javascript를 사용하여 사용자 정의 HTML 툴팁을 만들 수 있습니다.

a[title="My site"] {
    color: red;
}

이는 예를 들어 다음과 같은 추가할 모든 속성에서도 작동합니다.

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

다음 사이트에서 작동 확인: http://jsfiddle.net/vpYWE/1/

언급URL : https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

반응형

'source' 카테고리의 다른 글

사용자가 모바일 Safari에서 탐색했는지 확인  (0) 2023.08.14
변수에 대한 스크립트를 사용하여 프로세스 ID를 서비스 이름으로 가져오는 방법  (0) 2023.08.14
노드 앱을 실행할 때 bcrypt 잘못된 엘프 헤더  (0) 2023.08.14
올바른 GROUP BY 쿼리가 Oracle에서 INSERT INTO와 결합될 때 작동하지 않음  (0) 2023.08.14
null 참조에 대해 런타임 바인딩을 수행할 수 없습니다. Excel 셀 비우기  (0) 2023.08.14

'source'의 다른글

  • 현재글앵커 태그 내에서 제목 속성의 스타일을 변경하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바