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

Program / 글쓴이

브라우저가 :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 제네릭 솔루션은 없습니다. 두렵습니다. 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');
)

답변

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

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');
 });

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

답변

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

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 정의로 만들면 더 구체적으로 대상이 지정되지 않는 한 이전 정의를 무시해야합니다. 이 경우 더 많은 규칙을 삽입해야 할 수 있습니다.

답변

이것은 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>

답변

내가 사용하는 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');
});

답변

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

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

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

답변

장치가 터치를 지원하는 것을 감지하면 모든 :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');
          }
        }
      }
    }
  }
}