別のラッパーの中にテキストを表示するために、ラッパー内のdivをホバーしようとしています。別のラッパーでdivを表示しているとき
私は次のCSSでそれを刺してしまった。役に立たなかった。ここに私の試みはこれまでです：
は、ここで私はCSSをどうしようとしていたものです。
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascriptがここに移動するための方法かもしれませんが、私は初心者のビットんですその点で
ご協力いただき誠にありがとうございます。
#assotxtは、#assodivの兄弟ではありません。 :hoverも.mobileViewDiagramの要素に適用する必要がありますか？ :hover:afterを.mobileViewDiagramに、contentを表示するように設定することができます。ビューポートの適切な位置にテキストをレンダリングするには、top、leftプロパティを使用します。
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/
@GavinFriel '＃assodiv'内の' '要素は元の' html' ？ '＃divasso'は実際にどのようにぶら下げられますか？ '
'を '＃assodiv'の中で' div'の中にラップして、 '.mobileViewDiagram'要素の'＃assodiv'に '
'を置き換えてください。 'div：'ホバー 'に'
'が含まれていれば、ポストでアプローチしてください。 –
guest271314
あなたにも非表示とjQueryを使ってホバーイベントにご必要なのdivを表示することができます。
$(document).ready(function(){
$('#assodiv').on("mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on("mouseleave",function() {
$('#assotxt').hide();
});
});.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
@media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
<a href="" class="btn pill blue" href="#">Blue Button</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
<a href="" class="btn pill blue" href="#">Blue Button</a>
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>は「右ラッパーの上に」という意味に応じた位置にテキストを移動するのが良いでしょう：私は私の答えを更新しましたが、私は一番上に移動し、ページのdivの底を持っていることの意味を見ていないD – Mephiztopheles
@Mephiztophelesページの –
テキストsais "これはrightWrapper内の既存のテキストの上に表示されるはずです。"これはジョークのようなものでした：しかし、最初は私がjs-solutionを試してみたときに、スクロールバーが変化していることがわかるまでテキストが表示されない理由が疑問に思ったので、テキストがページの下に表示されていた – Mephiztopheles
平野JS：
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
ボディータグの下部にある<script>ブロックにこれを挿入してください。
これを試すことができます。
頭にこれを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
はこのJavaScriptを追加します。
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});
んが、 '＃のassotxt'要素が並んjsfiddle https://jsfiddle.net/gavinfriel/vhswx2jg/に表示されていませんか？ – guest271314
申し訳ありません私はちょうどそれを更新しました。 –
'＃assotxt'は'＃assodiv'の兄弟ではありません – guest271314