如何使用 Drupal CSS Injector 覆盖之前的悬停状态答案

【问题标题】：How to overwrite previous hover states with Drupal CSS Injector如何使用 Drupal CSS Injector 覆盖之前的悬停状态
【发布时间】：2015-01-19 16:23:35
【问题描述】：

我有 3 个 div，里面有 div，所以当你悬停时，里面的 div 会打开。自然，这会导致移动设备出现问题，因为 iOS 将悬停处理为点击，并可能导致此 sn-p 非常错误。我想让这些块总是在

中打开

@media screen only and (max-width:734px){
}

话虽如此，这里是棘手的部分。客户在 Drupal 上构建了他们的网站，我需要通过 CSS 注入器执行此操作，并且按照行业标准，我更愿意在没有“！important”标签的情况下这样做。

为了让您了解我的意思是它的设置方式：

HTML 结构

<div class="hover-this">
  <div class="static-banner">
    <div class="show-on hover">
       <h1></h1>
       <p></p>
    </div>
  </div>
</div>

CSS

.hover-this:hover .show-on-hover{
max-height: 440px;
transition: max-height 2s;
-webkit-transition: max-height 2s;
}

那么，如何在不使用“!important”的情况下覆盖 Drupal CSS Injector 中的现有代码？

我尝试过使用这个 sn-p 但没有成功...

 .hover-this:link .show-on-hover{
    max-height: 440px;
    transition: none;
    -webkit-transition: none;
    display:block;
    }

/*cancel previous hover state*/
    .hover-this:hover .show-on-hover{
    max-height: 440px;
    transition: none;
    -webkit-transition: none;
    display:block;
    }

【问题讨论】：

标签： html css drupal responsive-design drupal-7

【解决方案1】：

您可以使用.hover-this 的父级来执行此操作。例如：

<body>
  <div class="hover-this">
    <div class="static-banner">
      <div class="show-on hover">
       <h1></h1>
       <p></p>
      </div>
    </div>
  </div>
</body>

CSS

body .hover-this:hover .show-on-hover{
 max-height: 440px;
 transition: max-height 2s;
 -webkit-transition: max-height 2s;
}

本例假设 div 的父级是 body 标签，但您应该使用另一个标签。

【讨论】：

感谢您的回答，但是我通过回顾几个样式表解决了这个问题，以前的开发人员在 div 的悬停上设置了最大高度，所以我不得不在我的前一个中将其更改为使 div 始终展开。