Trigger CSS with JS

by hannahtaylor

HTML

<div class="stars">
	<span class="star" id="star1" onmouseover="starhover('star1', 'orange')"></span>
	<p>Mouseover the star</p>
</div>

<div class="stars">
	<span class="star" id="star2" onmouseout="starhover('star2', 'purple')"></span>
	<p>Mouse out of the star</p>
</div>

<div class="stars">
	<span class="star" id="star3" onclick="starcolor('star3', 'blue')"></span>
	<p>Click the star</p>
</div>

CSS

.star {
	color: white;
	font-size: 50px;
}

.star::before {
	content: '\2605'; /* Star outline */
	cursor: pointer;
}


.stars {
	background-color: black;
	text-align: center;
	margin: 10px 0px;
	padding: 10px 0px;
}
.stars p {
	color: white;
		font-family: "arial", sans-serif;
}

JavaScript

function starhover(el,clr) {
	var elem = document.getElementById(el);
	elem.style.transition = "color 0.5s ease-in 0s";
	elem.style.color = clr;
}

function starcolor(el,clr) {
	var elem = document.getElementById(el);
	elem.style.transition = "color 0.5s linear 0s";
	elem.style.color = clr;
}