diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 73aeaff19..d0ebdde76 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -50,6 +50,27 @@ test('it can generate focus variants', () => {
   })
 })
 
+test('it can generate parent-hover variants', () => {
+  const input = `
+    @variants parent-hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .parent:hover .parent-hover${separator}banana { color: yellow; }
+      .parent:hover .parent-hover${separator}chocolate { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate hover and focus variants', () => {
   const input = `
     @variants hover, focus {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index d425003f6..fa7ee850b 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -18,6 +18,16 @@ const variantGenerators = {
       rule.selector = `.focus${config.options.separator}${rule.selector.slice(1)}:focus`
     })
 
+    container.before(cloned.nodes)
+  },
+  'parent-hover': (container, config) => {
+    const cloned = container.clone()
+
+    cloned.walkRules(rule => {
+      // prettier-ignore
+      rule.selector = `.parent:hover .parent-hover${config.options.separator}${rule.selector.slice(1)}`
+    })
+
     container.before(cloned.nodes)
   },
 }
@@ -37,7 +47,7 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['focus', 'hover'], variant => {
+      _.forEach(['focus', 'hover', 'parent-hover'], variant => {
         if (variants.includes(variant)) {
           variantGenerators[variant](atRule, unwrappedConfig)
         }