OmegaBlastoise
Reputation: 93
Why does my link change color to red briefly after click?
I have created a modal box called Audience Demographics, Inside my modal box are a set of main genres which open up another modal box that contains my sub genres.
The problem is that when the user clicks on a main genre (e.g Demographics), briefly before the next modal box opens the main genre (e.g Demographics) will quickly change font color to red.
Now the font color should not be changing for any of my main genres period.
Furthermore to this, it would seem that the font color for my main genres isn't changing even when I go as far as manually implementing a color:white code into the html element (The sub genres are supposed to be white not blue).
May I please get some help on whats wrong.
// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
event.preventDefault();
$(this).modal({
closeExisting: true,
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
input:focus {
outline: none;
}
.your-divs {
float: right;
bottom: 0;
right: 0;
position: absolute;
padding-right: 30px;
padding-bottom: 15px;
margin-bottom: 0px;
font-size: 16px
}
.blackBox {
border-style: solid;
border-color: black;
background-color: black;
margin-bottom: 3px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 7px;
font-family: nunito;
font-size: 14px;
}<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="blackBox" data-name="audience">
<a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>
<div class="modal" id="ex6-1b" style="display:none; background-color:black">
<div style="float:left;">
<div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">
<p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>
<p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>
<p> <a href="#ex6-3b"><b>BAME</b></a> </p>
</div>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>
<p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>
<p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>
<p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>
<p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>
<p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>
<p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-3b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>
<p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian </b> </label> </p>
<p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>
<p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>Upvotes: 0
Views: 1065
Answers (1)
mplungjan
Reputation: 178350
Red is the default for an active link
Add
a:visited { color:yellow }
a:active { color:pink }
if you want to change the colours
// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
event.preventDefault();
$(this).modal({
closeExisting: true,
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});a:visited { color:yellow }
a:active { color:pink }
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
input:focus {
outline: none;
}
.your-divs {
float: right;
bottom: 0;
right: 0;
position: absolute;
padding-right: 30px;
padding-bottom: 15px;
margin-bottom: 0px;
font-size: 16px
}
.blackBox {
border-style: solid;
border-color: black;
background-color: black;
margin-bottom: 3px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 7px;
font-family: nunito;
font-size: 14px;
}<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="blackBox" data-name="audience">
<a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>
<div class="modal" id="ex6-1b" style="display:none; background-color:black">
<div style="float:left;">
<div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">
<p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>
<p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>
<p> <a href="#ex6-3b"><b>BAME</b></a> </p>
</div>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>
<p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>
<p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>
<p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>
<p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>
<p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>
<p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-3b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>
<p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian </b> </label> </p>
<p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>
<p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>Upvotes: 2
Related Questions
- Problems with links changing color when clicked
- Link does not change color when on click
- Change link color on click Jquery
- Don't change link color when a link is clicked
- Hyperlink colour changes when click is held
- maintain link color when clicked until clicking on another link
- Why do all links change colour when only one is clicked?
- Javascript change link color bug?
- Why my HTML link background does not change to red when mouse clicked on it?
- Selecting a HTML link causing CSS elements to change colours?