页面加载中的分区类Hover

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 */
 }

希望这会有所帮助:)