我想通过悬停按钮来更改 div 的背景图像。这是我的钥匙：
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
我真的不知道该怎么做，希望你能帮助我！
最好的问候！
【问题讨论】：
#event-button a 上，您想更改.content-portfolio 的背景吗？除非它们以某种方式连接在一起，否则您无法做到。
仅使用 css 很难。您可能可以使用一些 javascript 来做到这一点。但是，如果您的 div 是您的按钮的直接兄弟（两者之间没有其他元素），我找到了一种方法来做您想做的事情。
代码如下所示：
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
运算符“+”或“~”会将css应用于下一个兄弟元素。 这是一个JS Fiddle 向您展示技巧。
如果您只是删除“+”，它会将 css 应用于左侧元素的后代/子元素。欲了解更多信息，您可以查看this page。
【讨论】：
我认为当您将鼠标悬停在event-button 上时，您想更改.content-portfolio 的背景，对吧？你可以通过给按钮一个id 而不是class 来做到这一点，但是如果它们在某种程度上不相关，你不能用css selectors 影响其他元素。或者，如果它们有 id 而不是类，则更容易影响其他元素，特别是如果它们没有任何层次结构。您需要为此使用 javascript 解决方案 (fiddle here)：
HTML：
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS：
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript：
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
在这种方法中，我更改了您的 id 名称，以便可以直接引用它们，而不是使用 document.getElementById，但如果您的名称包含破折号 -，或者如果这在您的浏览器上不起作用，您应该使用前面提到的函数。
【讨论】：
typeof ContentPortfolio === 'undefined'
getElementById，以防这在他的浏览器上不起作用。这只是为了一个简单而干净的答案。
试试这个
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS：这里是小提琴[http://jsfiddle.net/somdow/d2Yf9/] ，图片来自我自己的网站，显然只是将网址更改为您自己的。
编辑：基本上，从我添加的代码中，你不需要任何它，你需要做的就是你做的同样的事情，只需更改悬停时的 url，你就可以开始了。
【讨论】：
也许你想改变.content-portfolio的背景图片，这样做的方法是：
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
【讨论】：
.content-portfolio的背景图片，而是改变子元素的背景图片。
content-portfolio 类的元素的背景。
.content-portfolio 和:hover 之间的空格了吗？如果没有空格，它会改变所有.content-portfolios 的背景，但有了它就不会。
你需要 jQuery。
创建两个类并向按钮添加两个 jquery 方法。一个带有悬停图像的 css 类和另一个没有悬停图像的类。
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
【讨论】：
你可以这样做（你需要 jquery）：
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
另外你可以创建两个不同背景的类，你可以通过jquery添加或删除类
【讨论】：
.content-portfolio 不是#yourbutton 的子元素怎么办？