0

いくつかのテキストがあり、それを最初のアイコンのより高く、インラインにしたいと考えています。これはライブです: http://www.penguinie.co.uk/#projects css は:

.german img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}

.german img:hover {
    border: 1px solid #2e8ece;
    border-radius: 10px 10px 10px 10px;
}

.german-content {
    display: none;
    float: right;
    width: 400px;
}

.german:hover .german-content {
    display: inline-block;
    border: 1px solid;
}

.german-content p {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    word-spacing: 5px;
    color: black;
}

.chembond img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}

.chembond img:hover {
    border: 1px solid #2e8ece;
    border-radius: 10px 10px 10px 10px;
}

.chembond-content {
    display: none;
    float: right;
    width: 400px;
}

.chembond:hover .chembond-content {
    display: inline-block;
    border: 1px solid;
}

.chembond-content p {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    word-spacing: 5px;
    color: black;
    overflow: scroll;
}

これが HTML です。

        <section id="projects-content">
            <p>Projects</p>
            <section class="german">
                <img src="assets/img/german.png" height="60" width="50" />
                <section class="german-content">
                    <p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it <a href="projects/german/">here</a> (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
                </section>
            </section>
            <section class="chembond">
                <img src="assets/img/bonding.png" height="60" width="50" />
                <section class="chembond-content">
                    <p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend <a href="ejayc.co.uk">Elliott</a> who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click <a href="projects/bonding/">here.</a> I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
                </section>
            </section>
        </section>

そのため、2 番目のアイコンにカーソルを合わせると、ボックス内のテキストが、最初のアイコンにカーソルを合わせたときと同じ高さになるようにします。

4

3 に答える 3

0

CSS に負の値の margin-top を追加することもできますが、いいえ。

はるかに保守しやすい解決策は<section class="content">、タグを 1 つだけにして配置し、関連するアイコンにカーソルを合わせたときに JS でテキストを変更することです。

于 2013-11-02T20:47:50.327 に答える
0

ここで単純な CSS と HTML を使用して質問をする場合は、個人リンクの代わりに jsFiddle を実行してそれを共有することを検討してください。そうしないと、これが機能していてライブ リンクが変更されると、質問は無関係になります。

CSS ポジション アプローチ

だから、ここに私のフィドルから少しコードの雑然としたものを差し引いたものがあります:

デモ

section2 番目の画像がのクラスを持つ要素を明らかにするためにホバーされ.chembond-content、要素が上部にない (最初の画像のように) 理由は、それを右に浮かせているためですが、その画像の後のドキュメント フローの一部であるためです。セクションの直前にあること。

両方の要素を同じ場所で開きたい場合は、これらの要素にfixedorのabsolute 位置を指定してドキュメント フローから外します。この例では、上から 20 ピクセル、右から 20 ピクセルに設定します。

これらの要素はマークアップの流れでスペースを占有しないため、必要に応じて両方を自由に上部に配置できます。

于 2013-11-02T21:15:49.493 に答える
0

CSSに追加する必要があるのは次のとおりです。

.chembond-content {
   display: none;
   float: right;
   width: 400px;
   position: relative;
   top: -72px;
}
于 2013-11-02T20:43:38.387 に答える