Applying hover in an article

Question

Applying hover in an article

Navigation

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

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

asked by anonymous 13.10.2017 / 12:58

3 answers

2

In order to work, you must remove the style attribute from the tag and pass everything that was in the tag to 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>

Result: link

But if that is not possible, you can do a "gambiara" by placing important in front of everything in the hover:

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

Result: link

13.10.2017 / 13:05

0

Your problem is in the application of style directly in the tag. This causes :hover in <style> to be ignored, since inline style declaration in the tag has more importance (or weight) than the same declared 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 leaner and therefore easier to manipulate.

The code below will apply the style rules to the elements at once in CSS and make your :hover work correctly:

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>

13.10.2017 / 23:36

java.lang.IndexOutOfBoundsException: Invalid index 4, size is 4 How can I select a range of items, after some values using SQL IN operator

score 4 · Accepted Answer

The reason this does not work is because inline styles in HTML have more weight than styles in CSS. Take a look at this ask 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>