小编Ada*_*dam的帖子

我在背景图像上使用CSS3变换来悬停.

我已经在Opera,Safari和Firefox的最新浏览器中进行了测试,并且运行良好且流畅,但是在Chrome中,过渡非常不稳定.

Heres是链接,将鼠标悬停在社交图标上以查看我的意思.. http://www.media-flare.com/pins/ - 我注意到当您将浏览器调整为移动视图时,它会变得更糟.

我在这里做了一个jsfiddle版本,并且因为很难看到它而放慢了转换速度.

http://jsfiddle.net/wsgfz/1/ - 这在chrome和firefox中看起来很生涩,在safari和opera中很流畅.

我能做些什么来使过渡更顺畅吗？

如果你不能查看jsfiddle,这是代码

HTML

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook, .twit, .tmblr, .pntrst, .insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s …

我的任务非常艰巨.

我这里有这个菜单...... http://jsfiddle.net/K2Zzh/6/

如果将鼠标悬停在"处理"上,则下拉菜单的宽度设置为150px,这很好,但是,如果将鼠标悬停在'aftercare'上,则可以看到此宽度太宽.我尝试过min-width,auto,inline-block,但到目前为止还没有运气.

不是为每个下拉列表创建一个单独的类,是否有一种聪明的方法将宽度设置为仅与每个菜单中最长的文本一样大？

用于下拉的css代码...

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  border-left: 1px solid #f6634c;
  border-bottom: 1px solid #f6634c;
  border-right: 1px solid #f6634c;
}
.dropdown ul li a {
  background-color: #fff;
  width: 150px;
  text-align: left;
}?

提前致谢.

我的HTML代码......

<ul class="mainNav">
  <li><a href="">Home</a></li>
  <li class="dropdown">
    <a href="">Treatments</a>
    <ul>
      <li><a href="">Body Treatments</a></li>
      <li><a href="">Make Up</a></li>
      <li><a href="">Skincare</a></li>
      <li><a href="">Hand & Feet Treats</a></li>
      <li><a href="">Hair Removal</a></li>
      <li><a href="">Alternative Therapies</a></li>
      <li><a href="">Eye Enhancements</a></li>
    </ul>
  </li>
  <li><a href="">Gallery</a></li>
  <li class="dropdown">
    <a …

我目前正在使用MAMP PRO在本地开发一个wordpress站点,这显然涉及使用本地数据库.

我想通过远程链接在我的iPhone上测试这个网站.我已设法通过在我的手机网址中键入以下内容来完成此操作...

192.234.2.32:8888 

(IP地址:端口号)

问题是显示索引页面但没有CSS样式.然后,当我点击另一个页面时,它表示无法找到该页面

它似乎已正确连接到服务器,但没有连接到wordpress数据库.(至少我认为这是问题)

有没有人知道如何使这项工作或指向正确的方向？您是否需要其他应用程序才能执行此操作,还是可以使用mamp/IP地址等完成？

提前致谢

我正在使用检测当前年份的javaScript,然后希望将其嵌入到HTML中.我有以下但似乎未定义.

这是我的代码......

HTML

<p>this year is <span id="year"></span></p>

JavaScript的

var date = document.write(new Date().getFullYear());

document.getElementById("year").innerHTML = date;

我可以在jQuery中执行此操作,但我尝试在vanailla javaScript中执行此操作,同时学习.

提前致谢.

我有一个元素:after伪元素.点击后,它将以平滑过渡旋转.

这是我的代码笔http://codepen.io/maxwbailey/pen/ABgJq - 这适用于Mac上的Chrome,Firefox和Opera,但在Safari上不起作用.

我的代码......

HTML

<div class="expand"></div>

CSS

.expand:after {
  content:"";
  display:block;
  width:200px;
  height:200px;
  background-color:red;
  cursor:pointer;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  transition: transform 1s ease;
} 

.expanded:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

jQuery的

$('.expand').click(function(e) {
    $(this).toggleClass('expanded');
});

想知道我做错了什么.

我在这个网站上看到它在Safari http://www.barrelny.com/blog/中工作正常(点击"按类别查看"下拉列表,看到箭头随着过渡而旋转.我在这里意识到他们不使用一个伪选择器,但有没有办法用伪类做？因为它在其他浏览器中工作只是不是Safari？

此外,这需要在:之后,我给出的示例是问题的简化版本

我正在尝试做以下事情......

1. 无论屏幕大小如何,都有一个始终在页面上水平和垂直居中的图像.
2. 保持调整大小的宽高比
3. 有一些文本始终位于视口的底部.

到目前为止,我已经提出了两个半解决方案......

• 解决方案1 ​​ - http://jsfiddle.net/5jphd/ - 这可以工作,但不保持宽高比
• 解决方案2 - http://jsfiddle.net/FAzBq/ - 这不是垂直居中的.

我正在寻找一种结合上述两者的解决方案.如果你不能点击上面的链接,这是我的代码...

HTML

<div class="image">
  <div class="wrap">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
 </div>
</div>
<div class="text">Scroll down</div>

CSS

//Solution 1

html, body {height: 100%}

body {
    position: relative;
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  width: 70%;
  height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; …

我想将一些jQuery行为应用于具有自己的css类的两个元素.

我正在选择这样的两个班......

$(".product-contain, .page-id-31").find("a:has(img)").fancybox({

但是,该脚本仅适用于第二选择器.我尝试了各种方法,但想不出一个正确的方法,我真的不希望只为其他选择器复制代码.

将脚本应用于上述两个选择器的正确方法是什么？

提前致谢.

我有两个默认隐藏的div.然后用户在点击时显示div.如果div已经打开,并且用户单击以显示另一个div,我希望隐藏当前div,并显示新div.

我目前的代码是这个..

HTML

<div class="menu">MENU</div>
<div class="search">SEARCH</div>

<div class="menu-box">MENU BOX</div>
<div class="search-box">SEARCH BOX</div>

CSS

 .menu, .search {
      display:inline-block;
      cursor:pointer;
    }

    .menu, .search, .menu-box, .search-box  {
      padding:20px;
      background-color: #ccc;
      margin-right:10px;  
    }

    .menu-box, .search-box {
      width:20%;
      display:none;
    }

    .menu-box {
      background-color:red;
    }

    .search-box {
      background-color:green;
    }

JAVASCRIPT

$('.menu').click(function(){
    $('.menu-box').slideToggle();
});

$('.search').click(function(){
    $('.search-box').slideToggle();
});

你可以在这里看到一个有效的演示......

http://codepen.io/seraphzz/pen/zbHDk

我一直在寻找帮助,但找到的所有解决方案都是标签,其中一个div总是显示.这不是我追求的.只有在点击该链接时才应显示div.

因此,要确认,如果"菜单"div已经打开,并且用户点击"搜索",我希望隐藏"菜单"div并显示"搜索".这两个div应该永远不会同时出现!

提前致谢

试图将动态年份注入HTML代码.

使用getElementById可以正常工作,但getElementsByClassName似乎不起作用.

这是我的代码......

HTML

<p>this year is <span class="year"></span></p>

JAVASCRIPT

document.getElementsByClassName("year").innerHTML = new Date().getFullYear();

有兴趣看看我做错了什么.