Question

页面加载时我需要div为on hover state。

<script>
window.onload = function() {
  document.getElementByClassName('project-1').className = 'hover';
};
</script>

css & html就是这样完成的，

<div class="projects-2">

      <div class="project-1">
      </div>
      <div class="project-2">
      </div>     
      <div class="project-3">
      </div>

</div>

.projects-2 > *:hover {
  opacity: 100;
  filter: alpha(opacity=10000);
  opacity: 1;
  filter: alpha(opacity=100);
}

我假设我单挑 .project-1喜欢这样，

.project-1 *:hover {
  opacity: 100;
  filter: alpha(opacity=10000);
  opacity: 1;
  filter: alpha(opacity=100);
}

我可以使用我展示的JS作为示例来实现此功能。但没有运气。有什么想法吗？

Answer 1

根据您提供的HTML：

JS

<script>
   window.onload = function() {
      document.querySelector('.project-1').className += " page-load-hover";

      document.querySelector('.projects-2').onmouseover=function(){
          var el = this.querySelector('.page-load-hover');
          el.className = el.className.replace(" page-load-hover", "");
      };
   }
</script>

CSS

.projects-2 > div:hover, .page-load-hover {
    opacity: .4;
    filter: alpha(opacity=40);
}

http://jsfiddle.net/9979J/

Answer 2

如果您使用Django没问题，可以通过以下方式轻松完成： -

在您的视图中创建以下内容：

def abc(request):
      context = {
           'content_type':'None'
       }
      response = render(request, "index.html", context)
      return response

在您的模板（index.html）中，默认情况下要悬停的div使用if条件执行以下操作： -

   <div class='col-md-3 sub-heading {% if content_type == "None" %}active{% endif %}'><a href="#">all</a></div>

在CSS中加入以下内容： -

.sub-heading.active a{
color:#191919 !Important;
font-weight:400;
text-decoration:none;
border-bottom:3px solid #191919;
padding-bottom:20px;     /*whatever css u put in hover put here */
 }

希望这会有所帮助：）

使Div类悬停在页面加载上

2 个答案: