Question

我想通过悬停按钮来更改div的背景图像。这是我的关键：

.content-portfolio {
    background-image: url(../files/portfolio/event.jpg) no-repeat;
}

#event-button a:hover{

}

我真的不知道怎么做，我希望你能帮助我！

祝你好运！

Answer 1

用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。

Answer 2

我认为您希望在.content-portfolio右侧悬停时更改event-button的背景信息？您可以通过按下id而不是class来实现正确，但无法影响css selectors的其他元素，如果他们＆＃ 39;在某种程度上没有关系。或者，如果他们有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，但如果您的名称包含短划线-或者这不起作用你的浏览器，你应该使用前面提到的功能。

Answer 3

也许您想要更改.content-portfolio的背景图片，这是这样做的方法：

.content-portfolio:hover {
    background-image: url(../files/portfolio/event.jpg) no-repeat;
}

请参阅：http://jsfiddle.net/y8tRd/

Answer 4

试试这个

.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就可以了。

Answer 5

你可以这样做（你需要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

添加或删除类

Answer 6

你需要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;
}

如何通过悬停按钮来改变css级的背景？

6 个答案: