Good people It's the following, I'm doing with javascript buttons to add the songs to favorites, but the plus button that I added and stylized with css does not appear in all songs, just a few. And another thing, every song, when doing mouse hover, makes a hover to highlight the song in which the user is hovering, my problem is that the + button also has hover, and when hovering in the + button, the hover of music disappears and goes to the music to the side ... Can anyone help me?
Thank you!
CSS:
/* BOTOES DE ADICIONAR A PLAYLIST E AOS FAVORITOS */
.option-btn1 {
position: absolute;
display: inline;
top: 50px;
z-index: 10000;
}
.option-btn1 .btn-add-fav i {
position: relative;
left: 300px;
top: 5px;
font-size: 200%;
color: rgba(255, 255, 255, 0.22);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10000;
}
.option-btn1 .btn-add-fav i:hover {
color: #74C8D2;
z-index: 10000;
}
JS: $ ("# submit"). click (function () { if ($ ("# artist"). val ()!="") {
query = $("#artist").val()
let url ="http://musicbrainz.org/ws/2/artist/?query=artist:"+ query +"&fmt=json";
url=encodeURI(url);
$.get(url,function(response,status){
if (status=='success') {
//alert(response.works)
//alert(query);
$(".form").hide();
$(".div-pesquisa").show();
$(".div-pesquisa h3").html("You searched for \" " + $("#artist").val() + " \" ");
url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
url=encodeURI(url);
//alert(url);
$.get(url,function(response,status){
if (status=='success') {
url="http://musicbrainz.org/ws/2/release/"+ response.releases[0].id +"?inc=recordings&fmt=json";
url=encodeURI(url);
$.get(url,function(response,status){
if (status=='success') {
//for (var i = -1; i < 3 ; i++){
url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[0].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
url=encodeURI(url);
//alert(url);
//alert(i);
$.get(url,function(response,status){
if (status=='success') {
//$("#topmusic1 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
$("#topmusic1 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
$("#topmusic1 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
addFav(response.items[0].snippet.title);
}))))
$("#topmusic1 figure .ion-ios-play-circle").click(function(){
$(".div-pesquisa").hide();
$(".player").show();
$(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
});
}
});
url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[1].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
url=encodeURI(url);
//alert(url);
//alert(i);
$.get(url,function(response,status){
if (status=='success') {
// $("#topmusic2 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
$("#topmusic2 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
$("#topmusic2 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
addFav(response.items[0].snippet.title);
}))))
$("#topmusic2 figure .ion-ios-play-circle").click(function(){
$(".div-pesquisa").hide();
$(".player").show();
$(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
});
}
});
url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[2].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
url=encodeURI(url);
//alert(url);
//alert(i);
$.get(url,function(response,status){
if (status=='success') {
// $("#topmusic3 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
$("#topmusic3 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
$("#topmusic3 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
addFav(response.items[0].snippet.title);
}))))
$("#topmusic3 figure .ion-ios-play-circle").click(function(){
$(".div-pesquisa").hide();
$(".player").show();
$(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
});
}
});
//}
}
});
Thank you guys!