Applying Hover to an article

Asked

Viewed 70 times

1

I’m trying to apply a Hover to an article but it’s not working.

<style>

article.item{
    margin: 5px;
    border: 1px #90ac6e solid; 
    border-radius: 6px; 
    background:#cfe8b1;
}

article.item:hover{
    margin: 5px;
    border: 1px red solid; 
    border-radius: 6px; 
    background:#ffffff;
}

</style>

<article class="item" style="float:left; margin-left:10px; margin-top:15px; margin-bottom: 15px; width: 100px; height:100px; border: 1px #90ac6e solid; border-radius: 6px; background:#cfe8b1; text-align:center;">
    <i class="fa fa-dashboard" aria-hidden="true" style="font-size:46pt; color:#666;"></i><br />
    <em style="font-family:padrao; size: 12pt; text-decoration:none; color:#003300;">Business Intelligence</em>
</article>
css

3 answers

4


The reason this doesn’t work is because styles applied inline in HTML have more weight than styles in CSS. Take a look at this question about this in detail here. 

article.item {
  margin: 5px;
  border: 1px #90ac6e solid;
  border-radius: 6px;
  background: #cfe8b1;
  width: 100px;
  height: 100px;
  text-align: center;
  transition: background-color .4s, border-color .4s;
  display: inline-block;
}

article.item:hover {
  cursor: pointer;
  background-color: #fff;
}
<section id="content" style="float:left; margin-left:10px; margin-top: 25px;  padding-left:5px; width:98%; border: 1px #90ac6e solid; border-radius: 6px; background:#f4ffe6; margin-bottom: 15px;">

<p style="margin:auto; padding: 35px; font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#003300; text-align:justify;">
<br />
O Kurma Suite BI foi especialmente desenvolvido pela Gopinatha&reg; para otimização da gestão das Concessionárias de Veículos. É a única Suite especializada na realidade das Concessionárias de Veículos do Brasil. Aqui você conta com as mais modernas técnicas de gestão, amplamente automatizadas, e de fácil compreensão.
<br />
</p>



<article class="item">
<a href="summary.php?id=724&fnc=<?php echo $prefix; ?>">
<i class="fa fa-dashboard" aria-hidden="true" style="padding-bottom: 0px; font-size:46pt; color:#666;"></i>
</a>

<a href="summary.php?id=724&fnc=<?php echo $prefix; ?>" style="font-family: padrao; text-decoration:none;">
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#003300;">Business Intelligence</em></a>
</article>

<article class="item">
<a href="premorc.php?id=730&fnc=<?php echo $prefix; ?>">
<i class="fa fa-pie-chart" aria-hidden="true" style="padding-bottom: 0px; font-size:46pt; color:#666;"></i>
<a href="premorc.php?id=730&fnc=<?php echo $prefix; ?>" style="font-family: padrao; text-decoration:none;"><em style="font-family:padrao; size: 12pt; text-decoration:none; color:#003300;">Budget</em></a>
</article>

<article class="item">
<i class="fa fa-cogs" aria-hidden="true" style="font-size:46pt; color:#ccc;"></i><br />
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#999;">Processos</em>
</article>

<article class="item">
<i class="fa fa-flag-checkered" aria-hidden="true" style="font-size:46pt; color:#ccc;"></i><br />
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#999;">Planejamento Estratégico</em>
</article>

<article class="item">
<i class="fa fa-bar-chart" aria-hidden="true" style="font-size:46pt; color:#ccc;"></i><br />
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#999;">Gestão Matricial Despesas</em>
</article>


<article class="item">
<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size:46pt; color:#ccc;"></i><br />
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#999;">Treinamento</em>
</article>

<article class="item">
<i class="fa fa-book" aria-hidden="true" style="font-size:46pt; color:#ccc;"></i><br />
<em style="font-family:padrao; size: 12pt; text-decoration:none; color:#999;">Biblioteca Virtual</em>
</article>



</section>

  • Hello Sergio. Thank you for the answer. It seems to have worked, but now, by putting seven Articles like this side by side, they appear vertically. Includes a display: inline-block but Articles appear misaligned.

  • @Webstermoitinho joined 2 more articles in my example?

  • It’s all messed up. The first was right, the second and the third were aligned with each other, but misaligned with the first, the fourth was aligned with the first, the fifth and the sixth aligned with the second and third, tá um rebu só kkkkk. I’m very weak in CSS...

  • @Webstermoitinho I can not see the problem you are having. You can make a jsFiddle and put here?

  • Sergio, I edited your answer to illustrate

  • 1

    @Webstermoitinho ter style throughout this HTML is a nightmare. Take it off and do something like this: https://jsfiddle.net/cquvsf0e/

  • Thanks Sergio. Now it worked out. Thanks

Show 2 more comments

2

To work, you must remove from tag article the attribute style and spend all that was in tag to the css:

article.item{
    margin: 5px;
    float:left; 
    margin-left:10px; 
    margin-top:15px; 
    margin-bottom: 15px; 
    width: 100px; height:100px; 
    border: 1px #90ac6e solid; 
    border-radius: 6px; 
    background:#cfe8b1; 
    text-align:center;
}

article.item:hover{
    margin: 5px;
    border: 1px red solid; 
    border-radius: 6px; 
    background:#ffffff;
}

Html:

<article class="item" style="">
    <i class="fa fa-dashboard" aria-hidden="true" style="font-size:46pt; color:#666;"></i><br />
    <em style="font-family:padrao; size: 12pt; text-decoration:none; color:#003300;">Business Intelligence</em>
</article>

Upshot: https://jsfiddle.net/06rsdt0z/

But if this is not possible, you can make a "gambiara", putting Important in front of everything in the hotel:

article.item:hover{
    margin: 5px !important;
    border: 1px red solid !important; 
    border-radius: 6px !important; 
    background:#ffffff !important;
}

Upshot: https://jsfiddle.net/06rsdt0z/1/

  • Hello Victor. It looks like it worked out, but now, by putting seven Articles like this side by side, they appear vertically. Includes a display: inline-block but Articles appear misaligned.

  • They get misaligned when you mouse over right?

  • No, they’re really out of alignment

  • 1

    @Webstermoitinho, ask another question about inline-block, because it is already outside the scope of this question, the question of the Hover has already been solved mark the answer that you think is best here, so in the other question I will be able to answer with code and a better explanation, the problem in particular of this question was the inheritance and has been solved.

0

Your problem is in the application of style directly on the tag. This causes the :hover in the <style> is ignored as style statement inline tag has more importance (or weight) than the same stated in <style></style>.

In addition, it is recommended to use the styles in cascade when you have multiple elements with the same styles on the page, making your code more streamlined and therefore easier to manipulate.

The code below will apply the style rules to the elements at once in the CSS and do with your :hover work properly:

article.item{
margin: 5px;
  border: 1px #90ac6e solid;
  border-radius: 6px;
  background: #cfe8b1;
  width: 100px;
  height: 100px;
  text-align: center;
  transition: background-color .4s, border-color .4s;
  display: inline-block;
}

article em{
	font-family:padrao; size: 12pt; text-decoration:none; color:#003300;
}

article i{
	font-size:46pt; color:#666;
}

article.item:hover{
    cursor: pointer;
  background-color: #fff;
}
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>
<article class="item">
    <i class="fa fa-dashboard" aria-hidden="true"></i><br />
    <em>Business Intelligence</em>
</article>

Browser other questions tagged css

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