1

我正在尝试制作一个用 CSS 改变两件事的按钮。首先，它会使文本出现，其次它会使文本顶部的图像消失。我已经尝试了很多东西，但我就是无法让它工作。任何帮助将不胜感激。CSS是

p {
    color:#591865;
    text-align:center;
    opacity:0;

}

p:target {
    color:# a1a100;
    opacity:1;
    -webkit-transition: opacity 1s linear;
}

#image {
    opacity: 1;
    background-image:url(images/01.jpg);
    height: 786px;
    width:1024;
}

#image:target {
    opacity:0;
}

和 html 是

<nav>
            <a href="#one, #image">One</a>
            <a href="#two, #image">Two</a>
            <a href="#three, #image">Three</a>
            <a href="#four, #image">Four</a>
        </nav>
       <div id="image"><img src="images/01.jpg"/></div> 
       <div>
        <p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p> 
        <p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p>
        <p id="three">Number Three</p>
        <p id="four">Number Four</p> 
   </div>
   </div>

感谢您的任何意见

4

5 回答 5

4

这是不可能的，因为它目前是写的。要以这种方式影响两个不同的元素，需要 JavaScript。

但是，如果您能够对 HTML 重新排序（并且愿意仅获得更现代的浏览器的支持），那么可以使用以下 HTML 来实现它：

<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>
</nav>
<div>
    <p id="one">
        <img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/>
    </p>
    <p id="two">
        <video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video>
    </p>
    <p id="three">
        Number Three
    </p>
    <p id="four">
        Number Four
    </p>
    <div id="image">
        <img src="images/01.jpg"/>
    </div>
</div>​

以及额外的 CSS 选择器：

p:target ~ #image {
    opacity:0;
}​

JS 小提琴演示。

如果 JavaScript 是一个选项，那么以下工作：

var links = document.querySelectorAll('nav > a'),
    image = document.getElementById('image');

for (var i=0,len=links.length; i<len; i++){
    links[i].onclick = function(e){
        image.style.opacity = '0';
    };
}​

JS 小提琴演示。

参考：

  1. CSS：

  2. JavaScript：

于 2012-04-27T20:44:39.270 回答
0

像这样的东西？（我在这里使用 jQuery，但同样的想法可以很容易地应用于常规 javascript）

<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show(); //It should be semicolon
        $( "#" + imageId ).hide();
    }
</script>
于 2012-04-27T20:39:13.833 回答
0

您不能在单个 href 中创建两个 id，因为 # href 使浏览器专注于您链接到的对象，因此如果您指向 2 个对象，浏览器就无法同时关注它们...

例如：假设您将两个 href 用于输入文本，两者都会被聚焦？当您键入时，它会在两者上输入相同的内容吗？

你可以使用javascript：

<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show().
        $( "#" + imageId ).hide();
    }
</script>

当然你必须包括jquery： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

于 2012-04-27T20:45:24.097 回答
0

我试图完成类似的事情，即仅使用 css 来显示\隐藏使用锚点的项目，以及目标选择器......

我没有时间为这个问题创建一个特定的例子，但我相信你可以弄清楚......；）

这是小提琴...

(http://jsfiddle.net/pB72f/)
于 2013-12-20T12:19:22.493 回答
0

正如 david Thomas 所说，您不能将 2 个 id 放入 url，但是有一个不需要 javascript 的复杂 css 解决方案。在您的提案中，您有四个 a 标签，因此您有 4 个单独的页面可以处于的状态。将所有 4 个 p 标签包装在 4 个嵌套跨度标签中的父 div 内，并为每个跨度标签标识每个人的 id状态

<nav>
    <a href="#oneimage1">One</a>
    <a href="#twoimage1">Two</a>
    <a href="#oneimage2">Three</a>
    <a href="#twoimage2">Four</a>
</nav>
<span id="oneimage1">
    <span id="twoimage1">
        <span id="oneimage2">
            <span id="twoimage2">

                <div id="image1"><img src="images/01.jpg"/></div>
                <div id="image2"><img src="images/01.jpg"/></div> 
                <div>
                    <p id="one">Number One</p> 
                    <p id="two">Number ~Two</p> 
                </div>
            </span>
        </span>
    </span>
</span>

然后CSS看起来像这样

span#oneimage1:target #image1 {Properties: values; go here }
span#oneimage1:target #one    {Properties: values; go here }

span#oneimage2:target #image2 {Properties: values; go here }
span#oneimage2:target #one    {Properties: values; go here }

span#twoimage1:target #image1 {Properties: values; go here }
span#twoimage1:target #two    {Properties: values; go here }

span#twoimage2:target #image2 {Properties: values; go here }
span#twoimage2:target #two    {Properties: values; go here }

这是有效的，因为您的目标是您希望从 url 控制的所有元素的父级。因为你需要四个 id 并且你只能在一个元素上放置一个 id，因此你需要嵌套 4 个 span 元素，这些元素是你希望控制其 css 的元素。

祝一切顺利。TJE

于 2017-10-23T06:43:44.230 回答