htmlなしでテキストを追加する

私はhtmlファイルを編集するためのアクセス権がありませんが、cssとjsのみです。私はいくつかの画像にホバー効果を使用したいので、中央のテキストが飛び出します。私はイメージのdivクラスを知っていますが、本文にテキストを追加することはできません。どのようにjsやCSSを使ってそれを行うことができますか？は私がhtmlなしでテキストを追加する

element.getElementsByClassName（クラス名）

して、CSSを使用するようなものを使用する必要がありますか？デベロッパーツールからここ

：

<head> 
    <base href="/home/"> 
    <title>TITLE</title> 
    <meta name="description" content="BLA BLA BLA"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta name="site-id" content="19750"> 
    <meta name="site-path" content="/home"> 
    <meta name="site-update-url" content="https://node.sv-cdn.com/notifications"> 
    <link rel="icon" type="image/png" href="/favicon.png"> 

    <link rel="stylesheet" media="all" href="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-23dad8deef60c63dc6e181346844e7439ba4f76c25ed84e0fb8bd63d3ce2023f.css"> 
    <link rel="stylesheet" href="./_sv_custom.css"> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> 
    <!--[if lt IE 9]> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script> 
    <![endif]--> 
<style>html.turbolinks-progress-bar::before { 
    content: ''; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
    background-color: #0076ff; 
    height: 3px; 
    opacity: 0.99; 
    width: 0%; 
    transition: width 300ms ease-out, opacity 150ms ease-in; 
    transform: translate3d(0,0,0); 
}</style><link rel="stylesheet" type="text/css" href="chrome-extension://onhiacboedfinnofagfgoaanfedhmfab/dist/contentStyles.css"></head> 
<body id="home" class="site-19750 page home home feed" data-no-turbolink=""> 
    <div class="sv-loader" id="sv-loader"><div class="sv-loader-loading"></div></div> 
    <div class="sv-theme"> 
    <div class="sv-feed"> 
    <div class="sv-feed-info" id="sv-feed-info" style="display: none;"> 
    <div class="sv-feed-info-inner"> 
     <h1 class="sv-feed-title sv-feed-info-title">WOLOBAN</h1> 
     <div class="sv-feed-description sv-feed-info-description"><p>BLA BLA BLA</p></div> 
    </div> 
    </div> 
    <a href="#sv-feed-info" class="sv-control sv-feed-control" data-sv-toggle="Info">Info</a> 
    <div class="sv-feed-inner"> 
    <div class="sv-feed-block"> 
     <div class="sv-feed-meta"> 
     <h1 class="sv-feed-title sv-feed-meta-title">WOLOBAN</h1> 
     </div> 
    </div> 
     <div class="sv-feed-item sv-feed-item-0 home 01photography jpg home01photographyjpg" id="svhome01photographyjpg"> 
    <div class="sv-feed-item-photo"> 
     <a target="_blank" href="/HOME/PHOTOGRAPHY"> 
      <img data-src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg" alt="01 PHOTOGRAPHY" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg"> 
</a>  <div class="sv-feed-item-photo-caption"><p>Photography</p></div> 
    </div> 
</div> 
     <div class="sv-feed-item sv-feed-item-1 home 02video jpg home02videojpg" id="svhome02videojpg"> 
    <div class="sv-feed-item-photo"> 
     <a target="_blank" href="/HOME/VIDEO"> 
      <img data-src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg" alt="02 VIDEO" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg"> 
</a>  <div class="sv-feed-item-photo-caption"><p>Video</p></div> 
    </div> 
</div> 
    </div> 
</div> 
    </div> 

    <script src="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-786a3a45375601be731dc81462c9dcf2bba435942bb0dbe9cd6bef8dd17bc5b5.js"></script> 
    <script src="./_sv_custom.js"></script> 
<span id="sbmarwbthv5"></span><a style="display: none; " id="exifview-absolute-url-convert-proxy" href="dummy"></a></body>

SV-フィード項目SV-フィードアイテム - 0ホーム01photographyのjpg home01photographyjpg "idは=" svhome01photographyjpgは私がホバーテキストを適用したい画像です

出典

2017-09-22 wlbn

ここはJavascript用です。

const imageContainer = document.querySelector('#svhome01photographyjpg'); 
imageContainer.appendChild('<div class="my-text-over-image">my text just here</div>')

とCSS（あなたがテキストをヒモするクラスにプロパティを追加することができます）：

#svhome01photographyjpg { 
    position: relative; 
    ... 
} 

.my-text-over-image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 2; 
}

出典

2017-09-22 13:02:00 Kornflexx

ありがとうございます！試しましたが、動作していないようです。 – wlbn

私はあなたを助けることができない全体のCSSなし。 z-indexの値を大きくするようにしてください。 – Kornflexx

デフォルトの.cssファイルには、.sv-feed-item-photoクラスのみが記載されています（IDはありません）。他の.css私は編集することができますが、私は＃で任意のIDを呼び出す場合は動作していないようです。私はクラスだけができます。 – wlbn

のみCSSスタイル：

.sv-feed-item-photo > a:hover:before { 
    position: absolute; 
    font-size: 50px; 
    content: "This is the text!"; 
    color: #fff; 
}

出典

2017-09-22 13:06:33

両方のアイテムで同じ内容であっても間違いなく動作します。 1つのアイテムのテキストと2番目のアイテムのテキストを指定するにはどうすればよいですか？ありがとうございました。 – wlbn

@wlbn 'ntn-child（n）'や 'nth-of-type（n）'を使うことができます。ここで、n次の要素やステートメント –

は、_.sv-feed-item-photo：ntn -child（0）_と_＃svhome01photographyjpg.sv-feed-item-photo_しかし、それは動作しません。申し訳ありませんが、私はコーディングに慣れていません。 – wlbn

htmlなしでテキストを追加する

答えて

関連する問題