JavaScript를 통해 CSS : hover 효과를 비활성화 할 수 있습니까?

99

브라우저가 :hoverJavaScript를 통해 CSS 의 효과 를 사용하지 못하도록하려고합니다 .

JS를 사용할 수없는 경우 호버 효과를 원하기 때문에 CSS에서 a및 a:hover스타일을 설정했습니다 . 그러나 JS 를 사용할 수있는 경우 CSS 호버 효과를 더 부드러운 효과로 덮어 쓰고 싶습니다 (예 : jQuery 색상 플러그인 사용).

나는 이것을 시도했다 :

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

나는 또한 그것을 시도했지만 return false;작동하지 않습니다.

다음은 내 문제의 예입니다. http://jsfiddle.net/4rEzz/ . 링크는 회색이되지 않고 희미 해져야합니다.

fudgey에서 언급했듯이 해결 방법은 사용하여 호버 스타일을 재설정하는 .css()것이지만 CSS에 지정된 모든 단일 속성을 덮어 써야 합니다 (여기 참조 : http://jsfiddle.net/raPeX/1/ ). 일반적인 솔루션을 찾고 있습니다.

누구든지 이것을하는 방법을 알고 있습니까?

추신 : 호버링에 대해 설정 한 모든 스타일을 덮어 쓰고 싶지 않습니다.

javascript jquery css

— 메오
소스

136

순수한 JavaScript 제네릭 솔루션은 없습니다. 두렵습니다. JavaScript는 CSS :hover상태 자체 를 끌 수 없습니다 .

그래도 다음 대체 해결 방법을 시도 할 수 있습니다. HTML과 CSS에 대해 조금이라도 신경 쓰지 않는다면 JavaScript를 통해 모든 CSS 속성을 수동으로 재설정 할 필요가 없습니다.

HTML

<body class="nojQuery">

CSS

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

자바 스크립트

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

— 폴 디 웨이트
소스

5

CSS가 외부 파일에 완전히 포함되어있을 때 작동하고 CSS가 먼저로드되지만 JS가 나중까지로드되지 않는 경우 페이지로드 중에도 작동하기 때문에이 솔루션이 noscript 솔루션보다 더 좋습니다. jQuery를 사용하여 "점진적으로 향상"하면로드가 완료되기 전에 항목을 클릭하면 페이지가 제대로 작동하지 않는 경우가 많습니다. 빠른 링크에서 빠른 브라우저를 사용하더라도 나는 이것을 많이 본다.

— Mr. Shiny and New 安宇

@씨. Shiny and New : 동의합니다.이 솔루션도 내 솔루션보다 더 좋습니다! 이전에이 제품의 우아함을 알아 차리지 못한 이유를 잘 모르겠습니다 ...

— Josh

3

“CSS가 외부 파일에 완전히 포함되어있을 때 작동하기 때문에이 솔루션이 noscript 솔루션보다 더 좋습니다.”– <noscript>솔루션도 마찬가지 입니다. <link>태그 <noscript>대신에 <style>태그를 넣기 만하면 됩니다 . 내 솔루션을 사용하면 여러 파일이 아닌 하나의 스타일 시트 파일 안에 모든 것을 유지할 수 있습니다.

— Paul D. Waite

정확히 내가 찾던 것은 아니지만이 솔루션이 최고의 타협이라고 생각합니다! 모두에게 Thx

— meo

다른 이름으로 동일한 스타일을 복사하고 jquery를 사용하여 해당 클래스의 모든 요소를 선택하고 클래스를 제거하고 복사 클래스로 바꿀 수도 있습니다.

— chepe263

14

호버 만 할당 된 두 번째 클래스를 사용하십시오.

HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

이제 Jquery를 사용하여 클래스를 제거 할 수 있습니다 (예 : 요소를 클릭 한 경우).

JQUERY

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

이 답변이 도움이 되었기를 바랍니다.

— 카이 노악
소스

3

더하기 1. 그것은 정통적이지는 않지만 매우 숭고한 방식으로 문제를 해결합니다.

— 짐 tollan

11

자바 스크립트로 스타일 시트와 스타일 시트 규칙을 직접 조작 할 수 있습니다.

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

속성을 중요하게 만들고 이것을 마지막 CSS 정의로 만들면 더 구체적으로 대상이 지정되지 않는 한 이전 정의를 무시해야합니다. 이 경우 더 많은 규칙을 삽입해야 할 수 있습니다.

— 스티븐 P
소스

1

또는 모든 noscript 규칙을 하나의 스타일 시트에 넣은 다음 자바 스크립트에서 스타일 시트를 비활성화 할 수 있습니다.

— Sean Hogan

2

아니면 요소 <link>안에 noscript 스타일 시트 태그를 넣으 <noscript>시겠습니까? 그거 맞죠?

— Paul D. Waite

1

또는 "문제가되는"규칙을 삭제하십시오 : developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa

1

IE5에서도 가능합니다. 메서드는 다르게 호출되지만 작동해야합니다 : msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx . 다른 브라우저는 확인하지 않았지만 모든 최신 브라우저가 표준을 구현한다고 생각합니다.

— RoToRa

Firefox에서Error: The operation is insecure.

— Alex W

11

이것은 aSeptik의 답변과 유사하지만이 접근 방식은 어떻습니까? JavaScript 사용을 비활성화하려는 CSS 코드를 <noscript>태그로 래핑합니다 . 이렇게하면 javaScript가 꺼져 있으면 CSS :hover가 사용되고 그렇지 않으면 JavaScript 효과가 사용됩니다.

예:

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

— 조롱
소스

4

내가 사용하는 not()CSS 연산자와 jQuery의 addClass()기능을. 다음은 목록 항목을 클릭하면 더 이상 호버링되지 않는 예입니다.

예를 들면 :

HTML

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

CSS

.vegies li:not(.no-hover):hover { color: blue; }

jQuery

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});

— ColdTuna
소스

3

CSS를 사용하여 : hover 이벤트가 링크의 모양을 변경하지 않도록합니다.

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

이 간단한 CSS는 링크가 항상 검은 색이며 밑줄이 표시되지 않음을 의미합니다. 나는 외모의 변화가 당신이 통제하고 싶은 유일한 것이냐는 질문에서 말할 수 없습니다.

— 크리스토퍼 알트만
소스

클라이언트에서 JS를 사용할 수없는 경우 : hover 효과가 있다는 것이 좋습니다. 하지만 만약 그렇다면 덮어 써야합니다. 내 CSS에서 a : hover 클래스를 설정했으며 비활성화하고 싶습니다.

— meo

@meo : CSS 의사 클래스를 비활성화 할 수는 없지만 모든 링크 스타일이 동일한 모양 / 매개 변수를 갖도록 설정하여 재정의 할 수 있습니다. 이 대답과 내 대답은 모두 다른 방식으로 이것을 수행합니다.

— Mottie 2010 년

3

장치가 터치를 지원하는 것을 감지하면 모든 :hover속성 을 대체하는 것이 좋습니다 :active. 이렇게 할 때이 함수를 호출하십시오 touch().

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}

— 쇼빗 샤르마
소스

나를 위해 잘 작동합니다. 감사!

— Inversion

1

링크 색상을 설정해보세요.

$("ul#mainFilter a").css('color','#000');

편집 : 또는 크리스토퍼가 제안한대로 CSS를 사용하는 것이 좋습니다.

— Mottie
소스

jsfiddle.net/raPeX 나는 예제를 만들었습니다. 작동하지만 그렇게하는 것은 어리석은 일입니다. 모든 CSS 값을 검색하여 스타일로 추가해야합니까? 더 나은 방법이 있어야합니다. 그렇게하고 싶지 않습니다. 하지만 힌트는 +1

— meo

Hi Meo, no no, 위의 코드는 귀하가 원한다고 생각한 특정 링크를 타겟팅했습니다. 이것이 의미하는 바가 a아닌 ul#mainFilter a경우 대신 사용하여 더 일반화 할 수 있습니까? 아니면 페이지의 모든 링크가 다른 색상이라고 말하는 것입니까?

— Mottie 2010 년

내가 의미하는 바를 보여주기 위해 귀하의 데모를 의견과 함께 업데이트했습니다. jsfiddle.net/raPeX/2

— Mottie

이미 감사합니다. 그러나 문제는 호버링에서 색상이 변경되는 것이 아니라 때로는 배경이 테두리, 때로는 선 높이까지 변경된다는 것입니다. 그렇기 때문에 호버링을 막는 것이 더 쉬울 것입니다. 모든 호버 효과를 덮어 쓰는 것입니다.

— meo

이 아이디어에 대한 부분 패치 : a.jsOverride:hover모든 CSS 특성을 재정의 하는 규칙을 선택하는 CSS를 만들 수 있으므로 js는 jsOverride페이지가로드 될 때 모든 링크에 해당 클래스를 추가해야 합니다 ...

— grossvogel

1

실제로 이것을 해결하는 다른 방법은 CSS를 insertRule.

CSS 규칙을 기존 / 새 스타일 시트에 삽입하는 기능을 제공합니다. 내 구체적인 예에서는 다음과 같습니다.

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

내 4 년 된 원본 예제를 사용한 데모 : http://jsfiddle.net/raPeX/21/

— 메오
소스