Include class as link

Question

Include class as link

Navigation

#1 by (4 votes)
#2 by (4 votes)

1

I have a div that will contain in your hover a specific color, this color will depend on the a that exists above it.

.homeNoticiasOpacidade {
    width: 100%;
    height: 100%;
    background-image: url("../imagens/engenhariaPNG.png");
    top: 0;
    position: absolute;
    z-index: 2;
    background-repeat: repeat;
    right: 0;
    display: none;
}
.homeNoticias li:hover .homeNoticiasOpacidade {
    display: block;
}
.homeNoticiasOpacidadeEngenharia {
    background-image: url("../imagens/engenhariaPNG.png");
}
.homeNoticiasOpacidadeHospitalar {
    background-image: url("../imagens/hospitalarPNG.png");
}
.homeNoticiasOpacidadeElevadores {
    background-image: url("../imagens/elevadoresPNG.png");
}
.homeNoticiasOpacidadeIluminacao {
    background-image: url("../imagens/IluminacaoPNG.png");
}

<ul class="homeNoticias margin-top-40">
    <li>
      <div class="p-relative">	
        <a href="/engenharia">
          <div class="homeNoticiasOpacidade homeNoticiasOpacidadeEngenharia"></div>
          <img src="./imagens/noticias1.jpg" height="305" width="250" alt="" title="" />
          <div class="homeNoticiasFundo">
            <span class="homeNoticiasData">03/09/2014</span>
            <span class="homeNoticiasDescricao">Lorem ipsum dolor sit amet, meis omnes ei cum, solet.</span>
            <div class="clear"></div>
            <a href="#" class="flechaPreta flechaBranca p-absolute bottom-20"></a>
          </div>
        </a>
      </div>
    </li>   
  <li>
    <div class="p-relative">	
      <a href="/hospitalar">
        <div class="homeNoticiasOpacidade homeNoticiasOpacidadeEngenharia"></div>
        <img src="./imagens/noticias1.jpg" height="305" width="250" alt="" title="" />
        <div class="homeNoticiasFundo">
          <span class="homeNoticiasData">03/09/2014</span>
          <span class="homeNoticiasDescricao">Lorem ipsum dolor sit amet, meis omnes ei cum, solet.</span>
          <div class="clear"></div>
          <a href="#" class="flechaPreta flechaBranca p-absolute bottom-20"></a>
        </div>
      </a>
    </div>
    </li>   
</ul>

What do I want to do? When the user hover over the li that has a / engineering he adds the homeNoticiasOpacidadeEngenharia class to the homeNoticiasOpacidade class. Or, if you have the / hospitalar it includes the homeNoticiasOpacidadeHospitalar class How could I do this?

How much will (window.location.toString().indexOf('/engenharia') > 0) work?

jquery

asked by anonymous 10.12.2014 / 13:46

2 answers

4

In parts:

When the user hover over the li that has a / engineering (...)

$('li').mouseover(function() {
    var li = $(this); 
    if(li.contains("a[href='/engenharia']")) {
        // SUA LÓGICA AQUI
    }      
});

(...) it adds the class homeNewsOpacityEngineering to class homeNewsOpacity

$('li').mouseover(function() {
    var li = $(this);
    if(li.contains("a[href='/engenharia']")) {
        var div = li.find('homeNoticiasOpacidade');
        div.addClass('homeNoticiasOpacidadeEngenharia');
    }
});

10.12.2014 / 13:51

Position of "letter" in string SQL query with error in Java [closed]

score 4 · Accepted Answer

You can only do this with CSS:

.homeNoticiasOpacidade {
    width: 100%;
    height: 100%;
    background-image: url("../imagens/engenhariaPNG.png");
    top: 0;
    position: absolute;
    z-index: 2;
    background-repeat: repeat;
    right: 0;
    display: none;
}
.homeNoticias li:hover .homeNoticiasOpacidade {
    display: block;
}
.homeNoticias li:hover a[href="/engenharia"] .homeNoticiasOpacidade {
    background-image: url("../imagens/engenhariaPNG.png");
}
.homeNoticias li:hover a[href="/hospitalar"] .homeNoticiasOpacidade {
    background-image: url("../imagens/hospitalarPNG.png");
}
.homeNoticias li:hover a[href="/elevadores"] .homeNoticiasOpacidade {
    background-image: url("../imagens/elevadoresPNG.png");
}
.homeNoticias li:hover a[href="/iluminacao"] .homeNoticiasOpacidade {
    background-image: url("../imagens/IluminacaoPNG.png");
}

<ul class="homeNoticias margin-top-40">
    <li>
      <div class="p-relative">	
        <a href="/engenharia">
          <div class="homeNoticiasOpacidade homeNoticiasOpacidadeEngenharia"></div>
          <img src="./imagens/noticias1.jpg" height="305" width="250" alt="" title="" />
          <div class="homeNoticiasFundo">
            <span class="homeNoticiasData">03/09/2014</span>
            <span class="homeNoticiasDescricao">Lorem ipsum dolor sit amet, meis omnes ei cum, solet.</span>
            <div class="clear"></div>
            <a href="#" class="flechaPreta flechaBranca p-absolute bottom-20"></a>
          </div>
        </a>
      </div>
    </li>   
  <li>
    <div class="p-relative">	
      <a href="/hospitalar">
        <div class="homeNoticiasOpacidade homeNoticiasOpacidadeEngenharia"></div>
        <img src="./imagens/noticias1.jpg" height="305" width="250" alt="" title="" />
        <div class="homeNoticiasFundo">
          <span class="homeNoticiasData">03/09/2014</span>
          <span class="homeNoticiasDescricao">Lorem ipsum dolor sit amet, meis omnes ei cum, solet.</span>
          <div class="clear"></div>
          <a href="#" class="flechaPreta flechaBranca p-absolute bottom-20"></a>
        </div>
      </a>
    </div>
    </li>   
</ul>

This is possible in this case because the element to which you want to apply the style is inside the link. Then just select by the href attribute and within it find div with the right class.