晚上好,社区, 我的代码有问题。
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
如果我将鼠标悬停在div&#34; mbubble&#34;班级&#34; thome&#34;会改变它的文字。我尝试通过使它们可见/不可见来做到这一点。
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
但它的播种没有影响吗?
你能告诉我你会怎么做吗?或者至少是通过悬停来改变文本的任何方式?祝你好运, 迈克尔
答案 0 :(得分:0)
如果你的结构非常简单,那么指针事件的技巧可以起作用:
这个想法是杀死var array_date = [];
var parser = d3.time.format("%Y/%m/%d %I%P");
d3.csv("my.csv", function(data){
console.log(data)
data.forEach(function(d) {
var theDate = parser(new Date(d.date));
array_date.push(theDate);
})
console.log(array_date)
});
并仅在pointer-events
上重新激活它,因为当你悬停一个孩子时,父母也会被徘徊,选择器可以从父母那里获取。
#mbubble
&#13;
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
&#13;
现在,如果您意识到没有<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
但只有pointer-events
它可以正常工作,您可能会理解只有在a;hover
中有其他内容不应该有用时才有用反应。只需点击<a>
即可触发链接。您的示例太少了吗?如果没有,请使用#mbubble
答案 1 :(得分:0)
这个怎么样:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})
答案 2 :(得分:0)
无论如何,它看起来在css中是可行的,虽然不推荐,但是使用横向DOM的javascript中有一个快速的内联解决方案,如下所示:
你必须记住它可能有奇怪的行为,通过右键单击不容易复制,这就是不应该直接使用内联javascripts的原因。周围有解决方法,祝你好运。
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
所以更好的方法是使用这样的函数:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
尽管如此,这还不够干净,javascript的好方法是添加一个事件监听器,如下所示:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
这样,html部分保持不变。 (..)