Include class as link

Asked

Viewed 151 times

1

I have a div which 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 hovers the mouse over the li who has the a /engineering he adds the class homeNoticiasOpacidadeEngenharia to class homeNoticiasOpacidade. Or, if you have the /hospital it includes the class homeNoticiasOpacidadeHospitalar How could I do that?

The (window.location.toString().indexOf('/engenharia') > 0) functionary?

jquery

  • You want to "mount" the class name according to the link, is that it? (e.g., if you have /engenharia flipped homeNoticiasOpacidadeEngenharia, if you have /hospitalar flipped homeNoticiasOpacidadeHospitalar etc.)

  • That’s right @mgibsonbr

2 answers

4

Split:

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

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

(...) it adds the homeclassNoticiasOpacityEngineering to the homeclass

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

  • Would not be $("li a:[href='/engenharia']").mouseover... ?

  • Yeah, if that’s all I read the target. As the homeNoticiasOpacityEngineering class is also in the other li, which has another href, I considered that the need was more generic.

  • @bfavaretto excellent answer. However, I forgot a detail. I have 4 situations, I quoted two in my question. Example: if it is /engineering adds homeNoticiasOpacidadeEngenharia if it’s /hospital adds homeNoticiasOpacidadeHospitalar

  • @Felipestoker Are you sure you need these very specific classes? It looks like you’re complicating more than you need to. I’ll edit the answer and explain how to handle it, but consider working with HTML and CSS so you don’t need classes like this.

  • I will. There will be 4 classes, which have four colors in a transparent PNG, for 4 sectors of the company.

  • 1

    Now that I’ve seen mgibsonbr’s answer, @Felipestoker. The reorganization of CSS is something like what he even suggested, creating specific rules for classes that exist within others. Even I would avoid depending on href, putting classes such as "engineering" straight into the li and basing myself on them.

  • @bfavaretto perfect your answer, it worked. mgibsonbr’s also worked only with CSS.

  • @bfavaretto I understand your position, what happens is that they are fixed and unmanageable items, so I believe I have no problem in manually reporting.

Show 3 more comments

4


You can do this only 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. So just select by the attribute href and within it find the div with the right class.

(I am not adding the class as requested in the question, only applying the style directly to the element, discarding the class. If you need this class for other reasons, disregard that answer.)

  • Excellent! And, if there is anything after the link, example http://www.meusite.com.br/engenharia/blablabla.html will have problem?

  • 1

    @Felipestoker In this case, use href^="..." instead of = - so you’ll be selecting by prefix.

  • Note 10 guy, I didn’t know I could report links in CSS.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.