動的に追加されたサムネイルにマウスを置いているときにスタイルを追加するにはどうすればよいですか？

var data = [{ 
 
    src: "..", 
 
    title: "Image 1" 
 
}, { 
 
    src: "..", 
 
    title: "Image 2" 
 
}, { 
 
    src: "..", 
 
    title: "Image 3" 
 
}]; 
 

 

 
$(document).ready(function() { 
 
    var $thumbs = $(".thumbnails"); 
 

 
    // dynamically add thumbnails to page 
 
    for (var i = 0; i < data.length; i++) { 
 
    $thumbs.append('<a href="#" class="thumbnail" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block"></a>'); 
 
    } 
 
});

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 
<body> 
 
    <!--thumbnail section--> 
 
    <section class="container"> 
 
    <div class="row add-bottom text-center thumbnails"> 
 
    </div> 
 
    </section> 
 

 
</body>

画像below.Howに示すように、与えられたコードのための画像のサムネイルをマウスを移動すると、私は同じことをやってのために行くだろうが、私は不透明といくつかのテキストを適用したいですか？

出典

2016-05-18 d.d.

にスパンを追加します。あなたは私の答えを見たことがありますか？ – dippas

あなたはposition:relative/absolute

var data = [{ 
 
    src: "//lorempixel.com/100/100", 
 
    title: "Image 1", 
 
    id: "1" 
 
}, { 
 
    src: "//lorempixel.com/100/100", 
 
    title: "Image 2", 
 
    id: "2" 
 
}, { 
 
    src: "//lorempixel.com/100/100", 
 
    title: "Image 3", 
 
    id: "3" 
 
}]; 
 

 

 
$(document).ready(function() { 
 
    var $thumbs = $(".thumbnails"); 
 

 
    // dynamically add thumbnails to page 
 
    for (var i = 0; i < data.length; i++) { 
 
    $thumbs.append('<div class="col-xs-12"><a id="a' + data[i].id + '" href="#" class="thumbnail" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block"></a></div>'); 
 
    } 
 
});

a { 
 
    position: relative; 
 
    display: inline-block !important 
 
    /* this might be not necessary */ 
 
} 
 
a:hover::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    color: white; 
 
} 
 
#a1:hover::after { 
 
    content: "I am a Title" 
 
} 
 
#a2:hover::after { 
 
    content: "I am a Text" 
 
} 
 
#a3:hover::after { 
 
    content: "I am Nothing" 
 
}

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 
<!--thumbnail section--> 
 
<section class="container"> 
 
    <div class="row add-bottom text-center thumbnails"> 
 
    </div> 
 
</section>

出典

2016-05-18 15:15:14 dippas

上記のコードで各画像に異なるテキストコンテンツを追加したいのですが、どうすればいいですか？ –

'a'sでiDを使用 – dippas

参照コードを共有できますか？ –

.thumbnailスパン{

opacity:0; 

z-index:0; 

position:absolute; 

top:50%

}

と擬似要素 ::afterを使用することができ

.thumbnail span：ホバー{ 不透明度：1;

z-index:1; 

position:absolute; 

top:50% 

-webkit-transition: opacity .25s ease-in-out .0s; 

transition: opacity .25s ease-in-out .0s; 

color:red

}

タグ

出典

2016-05-18 15:46:04 sarath

私は前にスパンを追加しようとしましたが、私はあなたが必要な出力を持っているあなたのコードを共有してください希望のresult.Canを持っていない？ –

https://jsfiddle.net/sarathch84/jfu845zr/8/ – sarath

動的に追加されたサムネイルにマウスを置いているときにスタイルを追加するにはどうすればよいですか？

答えて

関連する問題