Here's a visual representation of the issue. Imagine my mouse cursor as the red painted mouse because print screen doesn't capture the actual cursor.
Oddly enough, the element is being highlighted even though the cursor is not directly positioned on it.
https://i.sstatic.net/9LYMs.png
Has anyone encountered a similar situation? Any thoughts on what might be causing this behavior?
EDIT Here's the code snippet:
<div class="d-flex flex-column teamCard">
<p class="teamCardHeading">Best performing teams</p>
<div class="cardRow d-flex flex-row flex-wrap">
<BestTeamCardComponent />
<BestTeamCardComponent />
<BestTeamCardComponent />
<BestTeamCardComponent />
<BestTeamCardComponent />
</div>
</div>
---CSS-----
.teamCard {
width: 992px;
border-radius: 16px;
padding: 32px 24px 32px 24px;
background-color: white;
margin-bottom: 24px;
}
.teamCardHeading {
font-family: Averta-Bold;
font-size: 24px;
line-height: 32px;
color: #203767;
margin-bottom: 24px;
}
.cardRow {
width: 992px;
margin-bottom: 24px;
}
@media only screen and (max-width: 480px) {
.cardRow,
.teamCard {
width: 345px;
}
.teamMetricRow {
width: 300px;
}
.goalProgress,
.progressBar,
.progressMade {
display: none;
}
.teamMetricRowPoints {
transform: translateX(-0px);
}
}
BestTeamCardComponent
<template>
<div class="bestTeamMetric d-flex flex-column">
<p class="bestTeamMetricHeading">{{title}}</p>
<div
v-for="(rec, index) in records"
:key="index"
:style="{backgroundColor: index % 2 == 1 ? 'white' : '#f7f8fb'}"
class="d-flex flex-row teamMetricRow justify-content-around"
>
<div class="d-flex flex-column">
<p class="teamMetricRowTeam">{{rec.team}}</p>
<p class="teamMetricRowMembers">{{rec.members}} members</p>
</div>
<p class="teamMetricRowPoints align-self-center">{{rec.points}}pts</p>
<div class="d-flex flex-column align-self-center goalProgress">
<div class="progressBar"></div>
<div class="progressMade"></div>
</div>
</div>
</div>
</template>
---CSS---
<style scoped lang="scss">
.bestTeamMetric {
width: 456px;
margin-right: 35px;
margin-bottom: 30px;
}
.bestTeamMetricHeading {
font-family: Averta;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #5c6170;
}
.teamMetricRow {
width: 456px;
// height: 56px;
padding-top: 8px;
}
.teamMetricRowTeam {
font-family: Averta-Bold;
font-size: 16px;
line-height: 24px;
color: #203767;
}
.teamMetricRowMembers {
font-family: Avenir;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
color: #7e88a1;
}
.teamMetricRowPoints {
font-family: Averta;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #203767;
}
.goalProgress {
margin-bottom: 16px;
transform: translateX(-50px);
}
.progressBar {
position: absolute;
width: 192px;
height: 3px;
z-index: 1;
background: #f6f7ff;
border-radius: 32px;
}
.progressMade {
width: 120px;
height: 3px;
z-index: 2;
background: #2ab2ff;
border-radius: 32px;
}
@media only screen and (max-width: 480px) {
.bestTeamMetric {
width: 345px;
}
.teamMetricRow {
width: 300px;
}
.goalProgress,
.progressBar,
.progressMade {
display: none;
}
}