我正在尝试使用css悬停，并且通过执行以下操作使其在div上工作：
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
我的问题是，当我将鼠标悬停在具有complete-paper ID的属性上时，是否有办法定位另一个html元素，例如完全不相关的div？因此，当您将鼠标悬停在具有整张纸的div上时，将进行上述悬停css更改，以及在页面上更改另一个div吗？
谢谢
编辑：我有一个问题是，是否有可能的div是不相关的。但是在这种情况下，它们是相关的，当您将鼠标悬停在div上时，它实际上是在div内的ap，我希望p也能改变
可能重复:
如何使用Twitter Bootstrap在Twitter的网站上复制Follow/Unfollow悬停操作？
我正在创建一个类似Twitter的关注按钮.代码位于http://jsfiddle.net/RQSsz/9/.
<button type="submit" value="" class="btn follow following " title="In bookmarks">
<i class="bookmarked"></i><span>In bookmarks</span>
</button>
<button type="submit" value="" class="btn follow unfollow displaynone" title="From bookmarks">
<i class="unfollow"></i><span>From bookmarks</span>
</button>
$('.btn.follow.following').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(".btn.follow.following").toggleClass("displaynone");
$(".btn.follow.unfollow").toggleClass("displaynone");
} else {
$(".btn.follow.following").toggleClass("displaynone");
$(".btn.follow.unfollow").toggleClass("displaynone");
}
});
我的按钮闪烁有问题.怎么了？
我有一个图像和文本与它一起,我希望在悬停或通过单击图像同时更改这两个.
我可以设法让图像和文本分开交换,但不能同时交换.
<body>
<div id="page-container">
<div class="box-container">
<div class="image-container">
<a href="#"><img src=".jpg" height="100" width="200"/></a>
</div>
<div class="second-image-container">
<a href="#"><img src=".jpg" height="100" width="200"/></a>
</div>
<div id="text">
<div id="text-box">
<p>This is some text</p>
<p id="more-text">This is some more text</p>
</div>
</div>
<div id="text-two">
<div id="text-box-two">
<p>This is some text</p>
<p id="even-more-text">This is some more text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
div#text {
position: absolute;
background-color: black;
width: 350px;
height: 300px;
top: 10px;
right: -65px;
}
div#text p …我正在努力使网站兼容> IE8(包括IE).事实证明,悬停效果在任何IE版本中都不起作用.这是我的网站点击
当您导航到"计划"页面时,会出现一个公寓地图.当您将鼠标悬停在两个房间中的一个房间时,它会在其上显示蓝色框(在每个浏览器中,但不在IE中).问题是什么？
这是我正在使用的HTML:
<div id="slide3" class="slide">
<h1>Wybierz swój lokal</h1>
<div class="floor-nav">
<ul>
<li><a href="#floor0" class="floor-active">0</a></li>
<li><a href="#floor1" class="floor-inactive">+1</a></li>
</ul>
</div>
<div id="floor-0" class="floor">
<img src="img/floor-0.png" />
<a href="#" target="_blank" id="flat-1" class="flat">
<span class="flat-desc">Lokal <span class="bold">45m²</span></span>
</a>
<a href="#" target="_blank" id="flat-2" class="flat">
<span class="flat-desc">Lokal <span class="bold">25m²</span></span>
</a>
</div>
</div>
还有一些css:
.flat{
background:none;
position:absolute;
display:block;
color:#ffffff;
text-align:center;
font-size:30px;
text-decoration:none;
z-index:900;
}
.flat .flat-desc{
display:none;
padding-left:38px;
background:url(../img/plus-sign-white.png) left top no-repeat;
line-height:20px;
}
.flat:hover{
background:url(../img/flat-hover-bg.png);
}
.flat:hover .flat-desc{
display:inline;
}
你知道为什么会这样吗？
所以我需要,当我鼠标悬停时#3.双方#1并#2得到一个特定的CSS类.如果我将鼠标悬停#5,那么所有div都会获得css类.
当他们不再徘徊时,班级将从div中移除.
<div class="rateStar"><a href="#1"><img src="/images/images/stars.png"/></a></div>
<div class="rateStar"><a href="#2"><img src="/images/images/stars.png"/></a></div>
<div class="rateStar"><a href="#3"><img src="/images/images/stars.png"/></a></div>
<div class="rateStar"><a href="#4"><img src="/images/images/stars.png"/></a></div>
<div class="rateStar"><a href="#5"><img src="/images/images/stars.png"/></a></div>
但我对如何做到这一点有点失落,有人可以帮助我吗？
我有一个带有css样式的网页用于<A>标记.该样式也是A:Hover为该标签编写的.但我想单独删除它以获取特定标签.我可以在CSS中设置属性以使值没有变化.
让我们这样希望
A:hover {
font-family:no-change;
}
或者有什么特别的方法可以避免A:tag单独使用该特定标签吗？
我正在使用关键帧来不断更改<a>链接的字体颜色.在:hover我希望能够停止动画并定义字体颜色.
@-webkit-keyframes fontt {
0%, 100% {font-size:50px;color:black;}
50% {color:red;}}
#box a {-webkit-animation: fontt 2s infinite;}
#box a:hover {color:#4480e8;-webkit-animation-play-state: paused;
}
是否可以暂停关键帧并更改字体颜色？
我试过用!important,
我试图把color:red;不同的命名约定(a:hover,#box a:hover,#box:hover a
暂停关键帧会覆盖我:hover吗？有没有办法设定优先权？
我正在测试这个小提琴:
<table>
<tr>
<td class="changeme">something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td class="changeme">something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td class="changeme">something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td class="changeme">something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</table>
这个css:
.changeme:hover {
border:outset;
cursor:pointer;
}
我只是想在td标签上创建一个类似弹出的效果,但是当你在列上上下运行鼠标时它有这种奇怪的波浪效果,我怎么能删除它？
如何为元素添加悬停？考虑下面的代码：
package AutomationFramework;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
public class LoginPage {
private static WebDriver driver = null;
public static void main(String[] args) {
// Create a new instance of the Firefox driver
driver = new FirefoxDriver();
//Put a Implicit wait
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//Launch the Website
driver.get("URL");
// Find the element that's ID attribute is 'account'(My Account)
// driver.findElement(By.xpath("/html/body/table/tbody/tr[5]/td/table/tbody/tr/td[2]/form/table/tbody/tr[3]/td[2]/input")).click();
// Enter Username on the element
driver.findElement(By.name("userName")).sendKeys("remote");
// Find the element that's ID attribute is 'pwd' (Password)
driver.findElement(By.name("password")).sendKeys("aaaaaa");
// Now …我有一个HTML,看起来像这样:
<p>
<a id="foo" href="#bar">FOO</a><br/>
<a id="bar" href="#foo">BAR</a><br/>
</p>
现在我想在"FOO"徘徊时强调"BAR",反之亦然.有没有办法在CSS3中实现这一点,还是我需要jQuery？
我试过这个:
a#foo:hover ~ a[href="#foo"] {
color:red;
background-color:blue;
}
a#bar:hover ~ a[href="#bar"] {
color:red;
background-color:blue;
}
但是〜运算符只能向前运行,所以它对第一个链接起作用,但不适用于第二个链接.